/* device.css — portal-wide ergonomics driven by device detection. ========================================================================== Hooks are stamped on by static/js/device_detect.js before first paint: .device-phone / .device-tablet / .device-desktop form factor .is-touch / .is-no-touch primary input .os-ios / .os-ipados / .os-android / ... OS family The server mirrors the same verdict onto (see templates/base.html) so the very first request — before the client cookie exists — already gets the right treatment. Philosophy: these rules are *additive ergonomics*, not a redesign. They make the existing desktop layout usable by thumbs on a tablet/phone (the recurring iPad service-survey complaint) without altering the desktop experience. Page-specific stylesheets (the_boyz_mobile.css, service_surveys.css, …) still own their detailed responsive layouts and load after this file. ========================================================================== */ /* ---- Touch ergonomics: comfortable, HIG/Material-compliant hit targets ---- Applies to every touch device (phone or tablet) regardless of viewport, so a large iPad in landscape still gets finger-friendly controls. */ html.is-touch { /* 44px is the Apple HIG / Material Design minimum touch target. */ --portal-tap-min: 44px; } html.is-touch .btn, html.is-touch .nav-link, html.is-touch .dropdown-item, html.is-touch button:not(.btn-close), html.is-touch [role="button"] { min-height: var(--portal-tap-min); } /* Vertical centering for controls we just grew, so the label doesn't sit at the top of a taller box. */ html.is-touch .btn, html.is-touch button:not(.btn-close) { display: inline-flex; align-items: center; justify-content: center; } /* Roomier tap area for menu items without changing their visual weight. */ html.is-touch .dropdown-item { padding-top: 0.55rem; padding-bottom: 0.55rem; } /* iOS zooms the page when a focused input renders below 16px. Guarantee 16px on touch so forms (the survey editor especially) never trigger that jarring zoom. */ html.is-touch input:not([type="checkbox"]):not([type="radio"]), html.is-touch select, html.is-touch textarea, html.is-touch .form-control, html.is-touch .form-select { font-size: max(16px, 1rem); } /* Smooth, momentum scrolling inside any in-page scroll regions on touch. */ html.is-touch .table-responsive, html.is-touch .offcanvas-body, html.is-touch .modal-body { -webkit-overflow-scrolling: touch; } /* ---- Tablet (iPad et al.) ------------------------------------------------- Wide enough for multi-column work, but still a touch device held in two hands. Keep dense desktop grids from crushing content edge-to-edge. */ html.device-tablet body { /* Allow page chrome to breathe; pages can read this token if useful. */ --portal-device-gutter: 0.75rem; } /* Never force a horizontal scrollbar on a tablet — fixed desktop widths are the usual culprit. Let wide tables scroll inside their own container instead. */ html.device-tablet .table-responsive { overflow-x: auto; } /* Collapse two-up auto-fit grids to a single readable column once the viewport is in tablet-portrait territory. Targets the common portal grid utility used by the service survey editor and similar dense forms. */ @media (max-width: 834px) { html.device-tablet .svc-se-grid, html.device-tablet .row-cols-md-2 > * { grid-template-columns: 1fr; } } /* ---- Phone ---------------------------------------------------------------- Smallest screens: stack everything, kill horizontal overflow, and make sure sticky toolbars (e.g. the survey "Save changes" bar) stay reachable. */ html.device-phone body { --portal-device-gutter: 0.5rem; } html.device-phone .container, html.device-phone .container-fluid { padding-left: var(--portal-device-gutter); padding-right: var(--portal-device-gutter); } /* Common offender: fixed min-width grid cells overflow a phone. Let auto-fit grids fall back to a single column below the phone breakpoint. */ @media (max-width: 575.98px) { html.device-phone .svc-se-grid { grid-template-columns: 1fr; } } /* Respect users who ask for less motion — applies regardless of device. */ @media (prefers-reduced-motion: reduce) { html.is-touch * { scroll-behavior: auto !important; } }