/* ============================================================= Shared responsive layout — single source of truth for how wide the content column gets on each screen. Linked in the of every dashboard page (render-blocking, so no width flash). The whole app used to hard-cap at a 760px mobile column, so on a laptop or the 49" office monitor it was a thin strip down the middle. This widens the column by screen size and lets the card stacks reflow into columns, while phones keep the 760px feel. Pure CSS, no JS device detection, no build step. To retune every page at once, change the numbers here — nothing else. Tiers (viewport width -> content column width): phone / iPad portrait < 1080px 760px (unchanged) laptop >= 1080px 1040px large laptop / desktop >= 1440px 1240px 49" office monitor >= 2000px 1560px ============================================================= */ :root { --content-max: 760px; } @media (min-width: 1080px) { :root { --content-max: 1040px; } } @media (min-width: 1440px) { :root { --content-max: 1240px; } } @media (min-width: 2000px) { :root { --content-max: 1560px; } } /* ---- Bento: a vertical card stack on phones that reflows into balanced newspaper columns on wide screens. Each card keeps its own margin-bottom as the in-column gap; break-inside stops a card being split across two columns. Hidden (display:none) cards take no column space, so conditionally-shown cards behave. ---- */ .dash-cols > * { break-inside: avoid; } @media (min-width: 1080px) { .dash-cols { column-count: 2; column-gap: 16px; } } @media (min-width: 1700px) { .dash-cols { column-count: 3; } } /* ---- Two-up: a pair that stacks on phones and sits side by side on wide screens (e.g. Today / Plan tomorrow, water tracker / history). ---- */ @media (min-width: 1080px) { .two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; } }