/* planner-mobile.css (v1) * Mobile usability for the KitchenBlueprint planner. * * The core problem on phones: the top toolbar and the 3D toolbar are fixed * flex rows with no wrap and no scroll, so buttons past the screen edge * simply cannot be reached ("not all the buttons are showing"). * * Approach: on <=767px both toolbars become compact horizontally SWIPEABLE * strips — every button stays reachable with a thumb-swipe, the header stays * one row tall so the canvas keeps its space, and nothing about the desktop * layout changes. Loaded after the inline styles so these rules win. */ @media (max-width: 767px) { /* ---------- Top toolbar: one compact swipeable row ---------- */ header.topbar { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox */ gap: 6px; padding: 5px 8px; } header.topbar::-webkit-scrollbar { display: none; } /* Chrome/Safari */ /* Secondary info yields its space to the buttons on phones */ .topbar .spacer, .topbar .room-summary { display: none; } /* Nothing in the strip may shrink or wrap — that's what made buttons vanish; now they extend into the swipe area instead. */ .topbar > * { flex: 0 0 auto; } .topbar .btn-tool { padding: 7px 10px; font-size: 12px; white-space: nowrap; border-radius: 8px; } /* Keep the brand link compact so buttons start early */ .topbar .brand-link { margin-right: 2px; } /* ---------- 3D / view toolbars: same swipeable treatment ---------- */ .half-toolbar { flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 6px; padding: 6px 8px; } .half-toolbar::-webkit-scrollbar { display: none; } .half-toolbar > * { flex: 0 0 auto; } .half-toolbar .edit-room, .half-toolbar .iso-view-btn, .half-toolbar .iso-reset-btn { padding: 6px 9px; font-size: 12px; white-space: nowrap; } .half-toolbar .half-label { font-size: 10px; letter-spacing: 0.03em; } .half-toolbar .iso-hint { display: none; } /* hover hints have no meaning on touch */ .iso-controls { flex: 0 0 auto; display: inline-flex; gap: 4px; } /* ---------- Floating Select/Pan/Walk pill: slimmer on phones ---------- */ .kb3d-toolbar { gap: 4px; } /* ---------- Bottom overlays: keep clear of thumbs and each other ------- */ #running-total, .running-total { font-size: 12px; } /* ---------- Room-size / setup wizard: fit the REAL mobile viewport ----- */ /* 90vh ignores the browser address bar on phones, so the card ran taller than the visible screen and its buttons fell off the bottom. dvh (dynamic viewport height) tracks the true visible area; vh kept as fallback. */ .wiz-wrap { width: min(560px, 94vw); max-height: 86vh; /* fallback for older browsers */ max-height: calc(100dvh - 56px); padding: 18px 14px 16px; overflow-y: auto; -webkit-overflow-scrolling: touch; } .wiz-progress { margin-bottom: 14px; } .wiz-wrap input[type="number"], .wiz-wrap input[type="text"], .wiz-wrap select { font-size: 16px; /* <16px triggers iOS auto-zoom on focus */ min-height: 42px; /* comfortable touch target */ } /* ---------- Starter Templates: now lives in the top toolbar ------------ */ /* Positioning is handled in JS (the menu portals to when open), so no position overrides here — they'd fight the computed coordinates. */ .topbar .kb-tmpl-dd { margin-left: 0; flex: 0 0 auto; } .kb-tmpl-btn { font-size: 12px; padding: 6px 10px; white-space: nowrap; } .kb-tmpl-btn > span { display: none; } /* icon-only in the strip */ /* ====================================================================== Catalog sheet overhaul — from sideways chip strips to a browsable grid ====================================================================== */ /* Taller sheet with safe-area padding; dvh tracks the real viewport */ .library-panel { height: 78vh; /* fallback */ height: calc(100dvh - 120px); } /* Search: sticky feel + 16px so iOS doesn't zoom the page on focus */ .catalog-search { flex-shrink: 0; padding: 8px 12px; } .catalog-search input { font-size: 16px; min-height: 42px; width: 100%; box-sizing: border-box; } /* Materials shortcuts stay one swipeable row, out of the grid's way */ .materials-strip { flex-shrink: 0; overflow-x: auto; scrollbar-width: none; } .materials-strip::-webkit-scrollbar { display: none; } /* Category tabs: thumb-sized, swipeable */ .mob-tab-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 4px; padding: 4px 8px; } .mob-tab-bar::-webkit-scrollbar { display: none; } .mob-tab { flex: 0 0 auto; min-width: 64px; min-height: 52px; padding: 6px 8px; } .mob-tab-label { font-size: 11px; } /* THE core change: each category becomes a VERTICAL 2-column grid of big touch cards you scroll DOWN through — not a sideways strip of chips. */ /* The desktop accordion's section DIVIDERS ("FINISHES", "GROUND CABINETS"…) were rendering as a stack of empty rows that pushed the item grid off the bottom of the sheet. Categories live in the tab row on mobile, so everything in #cab-list except the tab panels (and the loading state) is dead space here. */ #cab-list > :not(.mob-tab-panel):not(.state) { display: none !important; } .cab-types { padding: 0; } /* Tabs as clearly tappable chips with an obvious active state */ .mob-tab { background: #fff; border: 1.5px solid #d8d2c4; border-radius: 10px; } .mob-tab.active { border-color: #2c4a63; background: rgba(44,74,99,0.08); color: #2c4a63; font-weight: 700; } /* The floating "?" help bubble was overlapping the sheet header */ .kbi-help { z-index: 150 !important; } /* sheet is 200 — bubble stays under it */ .mob-tab-panel { overflow-x: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; flex-wrap: wrap !important; align-content: flex-start; gap: 10px; padding: 12px 12px calc(18px + env(safe-area-inset-bottom, 0px)); min-height: 0; } .mob-tab-panel.active { display: flex !important; flex: 1 1 auto !important; } .mob-tab-panel .cab-size-chip { flex: 0 0 calc(50% - 5px); box-sizing: border-box; flex-direction: column; align-items: center; text-align: center; gap: 8px; min-height: 108px; padding: 12px 8px 10px; border-radius: 12px; } .mob-tab-panel .cab-size-chip:active { transform: scale(0.97); } .mob-tab-panel .chip-icon svg { width: 52px; height: 52px; } .mob-tab-panel .chip-label { text-align: center; min-width: 0; } .mob-tab-panel .chip-name { font-size: 12.5px; font-weight: 600; white-space: normal; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .mob-tab-panel .chip-dims { font-size: 11px; } /* The hover detail popup is a desktop affordance; on touch it just covers the grid — the card already shows name + dimensions. */ .cab-detail-popup { display: none !important; } /* ====================================================================== All dialogs & forms: fit the real mobile viewport ====================================================================== */ .share-card, .quote-overlay .card, .kb-beta-card { width: min(560px, 94vw); max-height: 86vh; /* fallback */ max-height: calc(100dvh - 48px); overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 18px 16px 16px; box-sizing: border-box; } .share-card input, .quote-overlay .card input, .quote-overlay .card select, .quote-overlay .card textarea { font-size: 16px; /* no iOS focus-zoom */ min-height: 42px; box-sizing: border-box; } .share-link-row { flex-wrap: wrap; gap: 8px; } .share-link-input { width: 100%; } /* ====================================================================== Reduced menu footprint — every strip earns its pixels ====================================================================== */ .half-toolbar { padding: 4px 8px; } .half-toolbar .half-label { display: none; } /* label adds nothing on a phone */ .view-tabs { padding: 2px 8px 0; } .kb3d-toolbar { transform: scale(0.92); transform-origin: top left; } /* ====================================================================== Peek sheet — half-open catalog with the 3D view still visible ====================================================================== */ .library-panel.kb-peek { transform: translateY(56%) !important; /* top ~44% visible */ box-shadow: 0 -2px 18px rgba(0,0,0,0.14); } .library-panel .panel-head { touch-action: none; } /* handle owns the gesture */ /* ====================================================================== Placement focus mode — chrome melts away while placing ====================================================================== */ body.kb-placing .view-tabs, body.kb-placing .half-toolbar, body.kb-placing .mob-nav, body.kb-placing .total-badge, body.kb-placing .placed-section, body.kb-placing .btn-quote, body.kb-placing .kb3d-toolbar { display: none !important; } .kb-place-banner { position: fixed; top: 8px; left: 8px; right: 8px; z-index: 700; display: none; align-items: center; gap: 10px; background: #1f2a37; color: #fff; border-radius: 12px; padding: 10px 12px; font-size: 13px; font-weight: 600; box-shadow: 0 6px 24px rgba(0,0,0,0.3); } .kb-place-banner.show { display: flex; } .kb-place-banner .kb-place-txt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kb-place-banner .kb-place-cancel { flex: 0 0 auto; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.35); color: #fff; border-radius: 8px; padding: 7px 12px; font-size: 12px; font-weight: 700; font-family: inherit; } /* ====================================================================== Item Color panel — from a big floating card to a slim bottom strip ====================================================================== */ /* Inline-styled in markup, so !important is required to relocate it. */ #item-color-panel { position: fixed !important; top: auto !important; left: 8px !important; right: 8px !important; bottom: calc(66px + env(safe-area-inset-bottom, 0px)) !important; max-width: none !important; padding: 8px 10px !important; border-radius: 12px !important; box-shadow: 0 6px 22px rgba(0,0,0,0.18) !important; } #item-color-panel > div:first-child { /* "ITEM COLOR" heading */ margin-bottom: 6px !important; font-size: 10px !important; } #item-color-swatches { flex-wrap: nowrap !important; /* one swipeable row */ max-width: none !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 8px !important; padding-bottom: 2px; } #item-color-swatches::-webkit-scrollbar { display: none; } #item-color-swatches button { flex: 0 0 auto; width: 36px !important; height: 36px !important; /* proper touch target */ } #item-color-reset, #item-color-apply-all { width: auto !important; display: inline-block; margin-top: 6px !important; margin-right: 6px; padding: 6px 10px !important; font-size: 11px !important; } /* Colour strip melts away during placement, like the rest of the chrome */ body.kb-placing #item-color-panel { display: none !important; } } /* Very small phones: tighten one more notch */ @media (max-width: 400px) { .topbar .btn-tool { padding: 6px 8px; font-size: 11px; } .half-toolbar .edit-room, .half-toolbar .iso-view-btn { padding: 5px 7px; font-size: 11px; } }