becomes one .list-styled card and its .card-header becomes the section label above it, matching the mockup's grouped-switches layout without new markup. */ #page-settings > section { padding: 0; margin-bottom: 24px; border: 0; box-shadow: none; background: transparent; max-width: none; } #page-settings > section > .card-header { padding: 0 4px 10px; font: 700 11px/16px var(--font-ui); letter-spacing: .06em; text-transform: uppercase; } #page-settings > section > .card-header .icon-chip { display: none; } #page-settings > section > .card-header h2 { font: inherit; color: var(--ink-muted); } #page-settings .settings-card { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); box-shadow: var(--shadow-card); padding: 4px 16px; } } /* --------------------------------------------------------------------- Stage 3 pattern (b): "See nutrients of this mix" link -- a recipe that IS a feeding (Renal Blend, Blenderized) renders inline and links into its full nutrient detail. Light green affordance on the page surface (distinct from the dark .detail-btn used inside the result sheet). Phone-gated like the rest: display:none by default so the button never shows on desktop even if a calculator inserts it into the DOM unconditionally; only shown <=640px. --------------------------------------------------------------------- */ .detail-link { display: none; } @media (max-width: 640px) { .detail-link { margin-top: 16px; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 50px; padding: 12px 16px; border-radius: var(--r-md); border: 1px solid var(--primary-container); background: var(--primary-tint); color: var(--on-primary-container); font-family: inherit; font-size: 14px; font-weight: 700; text-align: left; cursor: pointer; } .detail-link:hover { filter: brightness(0.97); } } /* --------------------------------------------------------------------- Stage 3 pattern (b) progressive disclosure. A calculator marks its full nutrient-breakdown section `.mshell-collapsible`; the "See nutrients of this mix" link toggles `.is-revealed`. Collapse is a PURE CSS breakpoint: the rule exists only <=640px, so desktop is NEVER subject to it -- a resize across the breakpoint can never strand a hidden section on desktop (parity, plan §1.5). The class is applied unconditionally by JS; only this media query hides it. --------------------------------------------------------------------- */ @media (max-width: 640px) { .mshell-collapsible:not(.is-revealed) { display: none; } } /* --------------------------------------------------------------------- Stage 4: the search palette on phone. The header ⌕ button (#quickSwitcherBtn, shown <=860px) already opens the EXISTING quick-switcher (quick-switcher.js) -- no second search is built. These phone-only rules just make that overlay feel native: a top-anchored near-full-width sheet, and a 16px input so iOS Safari does NOT auto-zoom on focus (any <16px input triggers the zoom). Desktop keeps the centered dialog (this block is <=640px only; mobile-shell.css loads last so these win at equal specificity over shell.css's base .qs-* rules). --------------------------------------------------------------------- */ @media (max-width: 640px) { .qs-overlay { padding-top: max(12px, env(safe-area-inset-top)); } .qs-dialog { width: calc(100vw - 20px); max-width: none; max-height: min(78vh, 620px); } .qs-input { font-size: 16px; padding: 16px; min-height: 52px; } } /* --------------------------------------------------------------------- Mockup-parity pass (mockup.html) on top of Stage 2B. Five phone-only changes, each scoped to the four hub pages / dashboard / #patientBanner: 1. The in-page

(h1 + .page-subtitle) is hidden on the four hub/list pages -- the topbar already shows the page title on phone (body[data-page] is set by navigation.js), so the in-page duplicate is redundant and its stuck focus-outline (h1 tabindex="-1") goes with it. Calculator pages are explicitly out of scope this pass, so this is an allowlist of four ids, not a blanket ".page-header { display:none }". 2. #page-alltools's "Browse calculators" card is flattened: its own .card-header (icon-chip +

) is hidden and the section's card chrome stripped, so #allToolsSearch sits bare on the page background like the mockup's .searchbox. .tool-tile-grid/.tool-tile below (Stage 2B, above) already carry the list-card look, so nothing else here needs to change. 3. The global workspace strip (#patientBanner) is restricted to Home. It is unconditionally hidden on every OTHER phone page via body[data-page] (set by navigation.js) rather than per-page-id selectors, so any current or future non-hub page is covered without another allowlist. Untouched at >640px. 4. Calculators' rows show a trailing chevron instead of the pin action: the existing .tool-tile-actions (pin button, opacity:1'd static in Stage 2B above) is hidden here, and a CSS-drawn chevron is added via ::after on .tool-tile-main, matching the mockup's .row .chev glyph. Desktop keeps the real pin affordance untouched. 5. #dashWorkspacePromo (the "create a workspace" feature-banner on Home) is recompacted from its desktop dark-hero treatment into the mockup's .ws-banner: a light green tint card with copy left / button right. Text is owned by a sibling change -- only layout/color here. --------------------------------------------------------------------- / @media (max-width: 640px) { / ---- 1. Redundant in-page header on the four hub/list pages ---- / #page-dashboard > .page-header, #page-alltools > .page-header, #page-referencehub > .page-header, #page-settings > .page-header { display: none; } / ---- 2. Flatten the "Browse calculators" card on #page-alltools ---- / #page-alltools section:has(.all-tools-toolbar) { background: transparent; border: 0; box-shadow: none; padding: 0; margin: 0 0 24px; } #page-alltools section:has(.all-tools-toolbar) > .card-header { display: none; } / ---- 3. Workspace strip is Home-only on phone ---- / body:not([data-page="dashboard"]) #patientBanner { display: none; } / ---- 4. Rows show a chevron, not a pin action ---- / #page-alltools .tool-tile-actions { display: none; } #page-alltools .tool-tile-main { position: relative; padding-right: 30px; } #page-alltools .tool-tile-main::after { content: ""; position: absolute; right: 10px; top: 50%; width: 8px; height: 8px; border: solid var(--ink-faint); border-width: 0 2px 2px 0; transform: translateY(-50%) rotate(-45deg); } / ---- 5. Compact the Home workspace banner into the mockup's .ws-banner ---- */ #page-dashboard #dashWorkspacePromo { display: flex; align-items: center; gap: 12px; margin: 6px 0 2px; padding: 13px 15px; border-radius: var(--r-lg); background: var(--primary-tint); border: 1px solid var(--primary-container); color: var(--on-primary-container); box-shadow: none; } #page-dashboard #dashWorkspacePromo .feature-banner-copy { align-items: center; gap: 10px; } #page-dashboard #dashWorkspacePromo .icon-chip { display: none; } #page-dashboard #dashWorkspacePromo h2 { font-size: 14px; font-weight: 700; color: inherit; margin: 0; } #page-dashboard #dashWorkspacePromo p { font-size: 12px; color: inherit; opacity: .9; margin: 2px 0 0; } #page-dashboard #dashWorkspacePromo .btn { flex: 0 0 auto; height: 40px; padding: 0 16px; border-radius: var(--r-full); } }