/* --------------------------------------------------------------------- Mobile reskin -- phone-only (<=640px) visual system from the 40 PNG mockups. docs/mobile-reskin-plan.md. Loaded LAST in index.html's (after tokens/components/shell/ pages/mobile-shell/mobile-calc) so its token overrides win at equal specificity. Scope discipline: everything here is gated behind the 640px query, so desktop/tablet stay pixel-identical. This file re-declares the design TOKENS on phone (Wave 0); later waves restyle components to match. Values are first-pass extractions from the mockups and are refined by the screenshot-vs-PNG compare loop -- treat any hex as provisional until a screen is signed off. Privacy/architecture rulings that constrain later waves live in docs/mobile-reskin-plan.md: no stored DOB / no PHI, inline result cards (dock retired), 5-tab nav, Pinned/Recent deferred. --------------------------------------------------------------------- */ @media (max-width: 640px) { :root { /* Canvas: warm off-white; cards sit on it as clean white with a large radius + soft shadow. */ --bg: #F5F4EE; --surface-card: #FFFFFF; --surface-low: #F0EFE8; --surface-mid: #EAE9E1; --surface-high: #E3E2D9; /* Primary: deep forest green -- wordmark, page titles, active tab, primary buttons, checks. */ --primary: #1F4A34; --on-primary: #FFFFFF; --primary-container: #DCE9D6; /* round tinted section-icon backgrounds */ --on-primary-container: #1F4A34; --primary-tint: #E8F0E5; /* chip / pill backgrounds */ --clinical-green-dark: #1F4A34; --secondary: #5C6B60; /* Ink: warm near-black headings; green-gray muted/faint. --ink-faint kept high enough to clear the 4.5:1 placeholder floor called out in tokens.css. */ --ink: #1B1D1A; --ink-muted: #566056; --ink-faint: #6A7268; /* Borders: warm neutrals to match the off-white canvas (cooler grays read as out-of-system). */ --border-subtle: #E6E3DA; --border-strong: #CBCFC1; /* Semantic accents seen across the mockups: amber (moderate/warning), red (severe/above-UL/ destructive), blue (info / "Higher protein" / "Updated"), purple (state badges: "Selected", "Lower volume"). Kept near the desktop hues so shared components read consistently. */ --warning: #E08A2B; --warning-bg: rgba(224,138,43,0.12); --danger: #CE4033; --danger-bg: #F7DEDA; --on-danger-bg: #7A1E16; --info: #3B78C9; --info-bg: #E7F0FB; --success: #1F4A34; --success-bg: rgba(31,74,52,0.10); --accent-purple: #6E56A6; --accent-purple-bg: #ECE7F5; /* Shape + elevation: larger card radius, softer/warmer shadow than desktop. */ --r-card: 20px; --shadow-card: 0 1px 2px rgba(31,41,33,0.04), 0 4px 16px rgba(31,41,33,0.05); --shadow-raised: 0 6px 24px rgba(31,41,33,0.08); --focus-ring: var(--primary); } /* Type: DM Serif Display for large page titles + wordmark only; Inter (--font-ui) stays the body/UI face, and section headers stay Inter. Later waves apply --font-display per screen; Wave 0 sets it on the page H1 so the display face is verified loading end-to-end. */ h1 { font-family: var(--font-display); font-weight: 400; /* DM Serif Display ships a single weight; never bold it */ letter-spacing: 0; line-height: 1.1; } /* Wave 6 PWA polish: iOS shows the root element's background in the rubber-band overscroll area above/below content. already paints --bg, but the scroll-bounce exposes , which is otherwise transparent and flashed the default white -- most visible past the top of a dark page in the installed PWA. Token-driven, so it tracks whichever phone theme is active. */ html { background: var(--bg); } } /* --------------------------------------------------------------------- Wave 6 -- phone DARK MODE: a token-level derivation of the warm light system above. The whole reskin reads its colour from these tokens, so re-declaring the token set for the dark theme propagates through every reskinned page with no per-component dark rules -- except the two families that bake a colour into an SVG data-URI background-image (not a mask), handled below. Trigger: the app resolves OS preference AND its own toggle down to a single signal -- `data-theme="dark"` stamped on (js/data/unit-conversions.js + js/app-fallback.js). CSS keys ONLY off that attribute, never `prefers-color-scheme`, so the in-app light/dark toggle stays authoritative on a dark-OS phone. `:root[data-theme="dark"]` is (0,2,0); it out-specifies the light `:root` (0,1,0) above and tokens.css's desktop `[data-theme="dark"]` (0,1,0), and loads last, so on a phone in dark mode these values win everywhere. Desktop is untouched (all gated behind 640px). Palette intent: warm off-white canvas -> warm near-black; deep forest primary -> a lighter on-dark sage-green (forest is too dark to read as text/icon on dark surfaces); tints -> dark tonal greens; borders/shadows deepened. Semantic accents track the desktop dark hues so shared components read consistently. Values are first-pass and refined by the 375px dark compare loop. */ @media (max-width: 640px) { :root[data-theme="dark"] { color-scheme: dark; /* Canvas: warm near-black; cards sit a step above it, still warm-neutral (echoes the paper hue). */ --bg: #100F0A; --surface-card: #211F17; --surface-low: #1A1810; --surface-mid: #2A281D; --surface-high: #353225; /* Primary: forest -> lighter on-dark sage-green (wordmark, page titles, active tab, checks). */ --primary: #86C58F; --on-primary: #10250F; --primary-container: #294231; /* round tinted section-icon backgrounds (dark tonal) */ --on-primary-container: #A8D8AF; --primary-tint: #1E3325; /* chip / pill / result-card panel backgrounds */ --clinical-green-dark: #86C58F; --secondary: #A6B3A8; /* Ink: warm off-white headings; green-gray muted/faint. --ink-faint stays light enough to clear the 4.5:1 placeholder floor on the dark surfaces it is used against. */ --ink: #E7E5DC; --ink-muted: #A2AB9E; --ink-faint: #8A9188; /* Borders: warm dark neutrals matching the canvas hue. */ --border-subtle: #302E24; --border-strong: #47453A; /* Semantic accents: lightened for dark surfaces, hues tracking tokens.css's dark theme. */ --warning: #F0A94D; --warning-bg: rgba(240,169,77,0.16); --danger: #F0776B; --danger-bg: #3A1C18; --on-danger-bg: #F8CBC4; --info: #6FA8E6; --info-bg: #17293A; --success: #86C58F; --success-bg: rgba(134,197,143,0.16); --accent-purple: #B4A2E0; --accent-purple-bg: #251F35; /* Shape unchanged; elevation deepened so cards separate from the near-black canvas. */ --r-card: 20px; --shadow-card: 0 1px 2px rgba(0,0,0,0.5), 0 4px 16px rgba(0,0,0,0.5); --shadow-raised: 0 6px 24px rgba(0,0,0,0.55); --focus-ring: var(--primary); } /* Result-card icon circles (#*MobileResults .rc-cell::before) draw a forest-stroke glyph as a background-IMAGE (not a mask) over a --surface-card fill, so the baked #1F4A34 stroke does not follow the token flip. In light mode that circle is a white badge popping off the tinted card; preserve that intent in dark by keeping the badge a pale sage so the forest glyph stays legible, rather than re-baking a light-stroke URI per cell. :is(#ids) carries id specificity (1,x,x) so it out-specifies the per-id light `background` shorthand; overriding background-color alone keeps the glyph image. Enumerated (not a bare .rc-cell) to leave any non-reskin dock cells alone. */ :root[data-theme="dark"] :is( #girMobileResults, #mnsMobileResults, #pnMobileResults, #goalVolumeMobileResults, #tubeFeedsMobileResults, #regimenMobileResults ) .rc-cell::before { background-color: #DCE9D6; } /* Interpretation banner icons (.gir-interp-ic, shared by GIR + PN range banners) are the other baked-colour background-images (mask:none): a forest check / blue info / amber warning glyph on a tinted circle. In dark the circle tints go dark, so swap in light-stroke glyphs that read on them. */ :root[data-theme="dark"] .gir-interp-ic { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386C58F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); } :root[data-theme="dark"] .gir-interp[data-tone="mid"] .gir-interp-ic { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236FA8E6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 10.5v5.5M12 7.6v.02'/%3E%3C/svg%3E"); } :root[data-theme="dark"] .gir-interp[data-tone="out"] .gir-interp-ic { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F0A94D' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5L2.5 20h19z'/%3E%3Cpath d='M12 10v4.5M12 17.4v.02'/%3E%3C/svg%3E"); } } /* --------------------------------------------------------------------- Wave 1 -- phone shell: 5-tab bar (markup + mobile-shell.css grid), serif wordmark, and the global "My Workspace" header switcher that replaces the patient-banner chrome on phone (mockups m1/m39). Header model (both mockups): row 1 is the serif "PediRD" wordmark (left) + the "My Workspace" pill (right), present on EVERY page; sub-pages add row 2 -- a chevron-only back control tight against the page title ("‹ Estimated Needs"). Implemented by turning the flex topbar into a 2-row grid ONLY at this breakpoint (desktop/tablet keep the flex topbar untouched). The old top-right ⌕ button is dropped on phone -- Search is a tab now -- and the whole #patientBanner is hidden, since the header switcher is the workspace surface here (Wave 3 builds its full landing page + Edit sheet). --------------------------------------------------------------------- */ /* Desktop/tablet keep the #patientTabs banner as the workspace switch; this pill is phone-only. */ .ws-switcher-wrap { display: none; } @media (max-width: 640px) { /* ---- Two-row header grid ---- row 1: brand (cols 1-2) + switcher (col 3); row 2: back (col 1) + title (cols 2-3). Column 1 is `auto`, so on Home/hub pages -- where the back control is hidden -- it collapses to 0 and the title (when shown) starts flush left. `.topbar` is `position: sticky; top: 0` (shell.css) and not height-referenced by any phone element now that the banner is gone, so growing to two rows just reflows the page below it -- no offset math to keep in sync. */ .topbar { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "brand brand switcher" "back title title"; align-items: center; column-gap: 8px; row-gap: 2px; height: auto; min-height: 56px; padding: 8px max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left)); } /* Home has no back/title, so collapse to a single wordmark+switcher row (no empty second row). */ body[data-page="dashboard"] .topbar { grid-template-areas: "brand brand switcher"; } .topbar-brand { display: flex; align-items: center; grid-area: brand; margin: 0; } .topbar-brand-name { font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1; letter-spacing: 0; color: var(--primary); } /* The mockup wordmark is a single forest-green colour -- override the desktop two-tone treatment. */ .topbar-brand-rd { color: var(--primary); } /* Back becomes a chevron-only control tucked against the title ("‹ Estimated Needs"). The router wiring (#backBtn) is unchanged; only the "Back" text label is dropped on phone. */ .topbar-back { grid-area: back; gap: 0; max-width: none; padding: 0 6px; } /* Chevron only -- drop the "Back" word entirely on phone. The full label is hidden with a plain 0,2,0 rule; the SHORT label needs a heavier hand because shell.css shows it via `body.trail-narrow .topbar-back-short` (0,2,1) once the trail is measured narrow (always, on a phone) -- so match that state and out-specify it at 0,3,1. */ .topbar .topbar-back-full { display: none; } body.trail-narrow .topbar .topbar-back-short { display: none; } #topbarTitle { grid-area: title; text-align: left; font-family: var(--font-display); font-weight: 400; font-size: 20px; letter-spacing: 0; text-transform: none; color: var(--primary); } .topbar-trail { grid-area: title; } /* Search moved to the tab bar -- drop the header ⌕ on phone (kept 641-860px for the tablet header). */ .topbar .quick-switcher-button { display: none; } /* The header switcher is the workspace surface on phone; the patient-banner chrome (and its calc-page chip, mobile-shell.css rules 3 & 6) is superseded. !important clears those rules' high :is()+:has() specificity without reworking them this wave. */ #patientBanner { display: none !important; } /* ---- "My Workspace" switcher pill (row 1, right) ---- */ .ws-switcher-wrap { display: block; grid-area: switcher; justify-self: end; position: relative; } .ws-switcher { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 10px 0 12px; border: 1px solid var(--border-subtle); border-radius: 14px; background: var(--surface-card); color: var(--ink); font: 600 14px/1 var(--font-ui); cursor: pointer; } .ws-switcher:active { background: var(--surface-low); } .ws-switcher:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .ws-switcher-glyph, .ws-switcher-caret { flex: 0 0 auto; color: var(--ink-muted); } .ws-switcher-label { white-space: nowrap; max-width: 42vw; overflow: hidden; text-overflow: ellipsis; } .ws-switcher[aria-expanded="true"] .ws-switcher-caret { transform: rotate(180deg); } /* ---- Dropdown menu (built by mobile-shell.js) ---- */ .ws-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 236px; max-width: min(86vw, 320px); padding: 6px; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); box-shadow: var(--shadow-raised); max-height: 70vh; overflow-y: auto; z-index: 50; /* above the sticky topbar (30); below the quick-switcher overlay (60) */ } .ws-menu[hidden] { display: none; } .ws-menu-head { padding: 8px 12px 6px; font: 700 11px/1.2 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); } .ws-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 8px 12px; border: 0; border-radius: var(--r-md); background: transparent; color: var(--ink); font: 600 15px/1.25 var(--font-ui); text-align: left; cursor: pointer; } .ws-menu-item:hover, .ws-menu-item:focus-visible { background: var(--surface-low); outline: none; } .ws-menu-item .ws-menu-item-body { flex: 1; min-width: 0; } .ws-menu-item .ws-menu-item-sub { display: block; font: 500 12px/1.3 var(--font-ui); color: var(--ink-muted); margin-top: 1px; } .ws-menu-item[aria-current="true"] { color: var(--primary); } .ws-menu-item[aria-current="true"] .ws-menu-check { color: var(--primary); margin-left: auto; flex: 0 0 auto; } .ws-menu-item .ws-menu-glyph { flex: 0 0 auto; color: var(--ink-muted); } .ws-menu-sep { height: 1px; margin: 6px 8px; background: var(--border-subtle); } } /* --------------------------------------------------------------------- Wave 2a -- Home (dashboard) restyle to mockup m1. The page becomes a phone-only flex column so its existing sections can be ORDERED to match m1 independently of DOM order, then each is restyled or hidden. Supersedes the Stage 2B home rules in mobile-shell.css (search hero / workspace section were hidden there; here they're shown and restyled). Growth Trend, Favorites/Pinned, Recent, and What's New stay hidden -- ruling §7.2 defers the recency store and the growth mini-chart. --------------------------------------------------------------------- */ @media (max-width: 640px) { /* Scoped to `.active` so this never overrides the router's `.page:not(.active){display:none}` -- an unqualified `#page-dashboard{display:flex}` would leave Home rendered under every other page. */ #page-dashboard.active { display: flex; flex-direction: column; gap: 18px; } /* m1 order: search -> hero title -> Quick Access -> workspace (summary|create) -> install -> note. Promo banners carry a `hidden` attr toggled by JS, so only one workspace slot ever renders. */ #page-dashboard .dash-search-hero { order: 1; } #page-dashboard .dash-phone-hero { order: 2; } #page-dashboard #mshellHomeQuick { order: 3; } #page-dashboard #dashWorkspaceSection { order: 4; } #page-dashboard #dashWorkspacePromo { order: 4; } #page-dashboard #dashPwaInstallPromo { order: 6; } #page-dashboard .footnote { order: 7; } /* Deferred surfaces (ruling §7.2) + the growth mini-chart (chart-heavy; Wave 3/6). */ #page-dashboard #dashboardPinnedSection, #page-dashboard #dashboardRecentSection, #page-dashboard .dash-whats-new, #page-dashboard #dashGrowthTrendCard { display: none; } /* Flex gap owns vertical rhythm now -- zero the sections' own bottom margins so spacing stays even. */ #page-dashboard > section, #page-dashboard > .phone-only-block { margin-top: 0; margin-bottom: 0; } /* ---- Search bar (m1): a rounded, input-looking trigger that opens the quick-switcher ---- */ #page-dashboard .dash-search-hero { display: flex; gap: 10px; align-items: center; } #page-dashboard .dash-search-trigger { flex: 1; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--border-subtle); background: var(--surface-card); box-shadow: var(--shadow-card); color: var(--ink-faint); font: 500 16px/1.2 var(--font-ui); /* 16px keeps parity with the real input the mockup mimics */ } #page-dashboard .dash-search-trigger .icon { color: var(--ink-muted); flex: 0 0 auto; } /* Show the short placeholder ("Search tools & formulas"); drop only the Ctrl-K hint (no hardware keyboard on a phone). The dark-mode toggle IS shown beside the search pill, mirroring desktop. */ #page-dashboard .dash-search-placeholder-full, #page-dashboard .dash-search-kbd { display: none; } #page-dashboard .dash-search-placeholder-short { display: inline; } /* Dark-mode toggle beside the search pill (mirrors desktop's dash-search-hero row). Square button sized to the pill so the row reads as one control cluster; surface/border/shadow/centering + the dark-theme primary tint come from the desktop .dash-theme-toggle base (css/pages.css). */ #page-dashboard .dash-theme-toggle { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 14px; } #page-dashboard .dash-theme-toggle .icon { width: 22px; height: 22px; } /* ---- Hero title/subtitle (m1) ---- */ .dash-phone-title { font-family: var(--font-display); font-weight: 400; font-size: 32px; line-height: 1.08; letter-spacing: 0; color: var(--ink); margin: 0; } .dash-phone-sub { margin: 10px 0 0; font: 500 15px/1.4 var(--font-ui); color: var(--ink-muted); max-width: 30ch; } /* ---- Quick Access (m1): a "See all" section label + a 3-up card grid ---- */ .mshell-section-label-row { display: flex; align-items: baseline; justify-content: space-between; } .qa-see-all { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; /* .tool-launch-card sets flex:1 (pages.css) -- don't let it stretch */ width: auto; border: 0; background: none; padding: 0; cursor: pointer; font: 700 12px/1 var(--font-ui); letter-spacing: 0; text-transform: none; color: var(--primary); } .qa-see-all .icon { width: 15px; height: 15px; } .qa-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .qa-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 148px; padding: 14px 12px 34px; border: 1px solid var(--border-subtle); border-radius: var(--r-card); background: var(--surface-card); box-shadow: var(--shadow-card); text-align: left; font-family: inherit; cursor: pointer; } .qa-card:active { background: var(--surface-low); } /* All Quick Access tiles share the sage-tint circle + forest icon of m1, regardless of the desktop icon-chip variant class each still carries. */ .qa-card .icon-chip { width: 44px; height: 44px; flex: 0 0 44px; background: var(--primary-container); color: var(--primary); border-radius: var(--r-full); } .qa-card .icon-chip .icon { width: 22px; height: 22px; } .qa-card-title { font: 700 14px/1.2 var(--font-ui); letter-spacing: -.01em; color: var(--ink); } .qa-card-sub { font: 500 12px/1.3 var(--font-ui); color: var(--ink-muted); } .qa-card-chev { position: absolute; right: 12px; bottom: 12px; width: 18px; height: 18px; color: var(--ink-faint); } /* ---- Workspace Summary card (m1) -- shown when a workspace is active (JS unhides the card). The section heading is dropped (the card owns its own "Workspace Summary" title); the growth trend card beside it is hidden above, so the grid collapses to a single column. Data model is unchanged -- this only reskins the existing privacy-safe fields (age/weight/regimen, no name, no DOB). ---- */ /* Show the workspace section (mobile-shell.css Stage 2B hid it on phone); the double-#id selector out-ranks that .dash-workspace-section hide. Collapse it back to nothing when no workspace is active -- the summary card carries `hidden` then, and the Create-workspace promo takes the slot, so an always-shown wrapper would otherwise leave an empty flex gap. */ #page-dashboard #dashWorkspaceSection { display: block; } #page-dashboard #dashWorkspaceSection:has(#dashWorkspaceSummaryCard[hidden]) { display: none; } #page-dashboard #dashWorkspaceSection .dashboard-section-heading { display: none; } #page-dashboard .dashboard-workspace-grid { display: block; } #page-dashboard .workspace-summary-card { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 18px 16px; } #page-dashboard .workspace-summary-card .workspace-card-header h2 { font: 700 16px/1.2 var(--font-ui); letter-spacing: 0; text-transform: none; /* m1 is title case ("Workspace Summary"), not the desktop uppercase */ color: var(--ink); margin: 0 0 12px; } #page-dashboard .workspace-summary-card .stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px 0; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); } /* Flatten the desktop stat cells to m1's borderless number+label. */ #page-dashboard .workspace-summary-card .stat { background: none; border: 0; box-shadow: none; padding: 0; text-align: left; } #page-dashboard .workspace-summary-card .stat .num { font: 700 18px/1.1 var(--font-ui); color: var(--primary); font-variant-numeric: tabular-nums; } #page-dashboard .workspace-summary-card .stat .lbl { font: 600 11px/1.2 var(--font-ui); color: var(--ink-muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 3px; } #page-dashboard .workspace-summary-card .detail-line { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--border-subtle); font: 500 13.5px/1.3 var(--font-ui); color: var(--ink); } #page-dashboard .workspace-summary-card .detail-line:first-child { border-top: 0; } #page-dashboard .workspace-summary-card .detail-line > span:first-child { color: var(--ink-muted); } #page-dashboard .workspace-summary-card .workspace-summary-details { margin-top: 4px; } #page-dashboard .workspace-summary-card .workspace-regimen-block { padding: 10px 0; border-top: 1px solid var(--border-subtle); } #page-dashboard .workspace-summary-card .workspace-regimen-label { display: block; font: 600 11px/1.2 var(--font-ui); color: var(--ink-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px; } #page-dashboard .workspace-summary-card .workspace-regimen-lines { font: 500 13.5px/1.35 var(--font-ui); color: var(--ink); } #page-dashboard .workspace-summary-card .text-action { margin-top: 12px; color: var(--primary); font: 700 13px/1 var(--font-ui); } } /* --------------------------------------------------------------------- Wave 2b -- Calculators (m2), References, and Settings hubs. Top-level tab pages (Calculators/References/Settings) carry their title as a big serif body H1 (mockups m2/m8), NOT as the topbar's row-2 title -- so on these pages the in-page .page-header is revealed + restyled and #topbarTitle is hidden, collapsing the topbar to its single wordmark+ switcher row (like Home). Calculator sub-pages keep the Wave 1 "‹ Title" back row. Calculators body: the existing TOOL_SECTIONS render (js/tool-navigation.js) is restyled in place to m2's section-card + 2-up tile-card look. The section TAXONOMY is deliberately left alone -- m2's regrouping (a Utilities section, a split Recipes section) would change the shared desktop Calculators page, so it's an IA decision to flag, not make here. The category filter chips and collapsible sections m2 shows are DEFERRED for the same reason (they key off that taxonomy). --------------------------------------------------------------------- */ @media (max-width: 640px) { /* ---- Hub-page header: serif body H1, no topbar title ---- */ #page-alltools > .page-header, #page-referencehub > .page-header, #page-settings > .page-header, #page-search > .page-header, #page-workspace > .page-header { display: block; } #page-alltools > .page-header .page-subtitle, #page-referencehub > .page-header .page-subtitle, #page-settings > .page-header .page-subtitle, #page-search > .page-header .page-subtitle { display: none; } /* Workspace KEEPS its subtitle (m12 "Manage your patient workspaces..."), unlike the other hubs. */ #page-workspace > .page-header .page-subtitle { display: block; margin: -6px 0 4px; font: 500 15px/1.4 var(--font-ui); color: var(--ink-muted); } :is(#page-alltools, #page-referencehub, #page-settings, #page-search, #page-workspace) > .page-header h1 { font-family: var(--font-display); font-weight: 400; font-size: 32px; line-height: 1.08; letter-spacing: 0; color: var(--ink); margin: 0 0 14px; } #page-workspace > .page-header h1 { margin: 0 0 6px; } /* Drop the topbar row-2 title on these top-level pages + collapse the header to a single row. */ body:is([data-page="alltools"], [data-page="referencehub"], [data-page="settings"], [data-page="search"], [data-page="workspace"]) #topbarTitle { display: none; } body:is([data-page="alltools"], [data-page="referencehub"], [data-page="settings"], [data-page="search"], [data-page="workspace"]) .topbar { grid-template-areas: "brand brand switcher"; } /* ---- "Find a tool" search pill (m2) ---- */ #page-alltools #allToolsSearch { min-height: 52px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--border-subtle); background: var(--surface-card); box-shadow: var(--shadow-card); font: 500 16px/1.2 var(--font-ui); color: var(--ink); } /* ---- Section cards (m2) -- override Stage 2B's flat-list treatment ---- */ #page-alltools .tool-section { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 14px; margin-bottom: 14px; } /* Heading: round tinted icon + serif title (Stage 2B hid the icon + uppercased the label). */ #page-alltools .tool-section-heading { display: flex; align-items: center; gap: 10px; grid-template-columns: none; margin-bottom: 12px; font: 400 18px/1.2 var(--font-display); letter-spacing: 0; text-transform: none; color: var(--ink); } #page-alltools .tool-section-heading .icon-chip { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: var(--r-full); background: var(--primary-container); color: var(--primary); } #page-alltools .tool-section-heading .icon-chip .icon { width: 19px; height: 19px; } #page-alltools .tool-section-heading::after { content: none; } /* Tiles: a 2-up grid of bordered mini-cards (override Stage 2B's single divided list). */ #page-alltools .tool-tile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; background: none; border: 0; box-shadow: none; overflow: visible; } #page-alltools .tool-tile { background: var(--surface-card); border: 1px solid var(--border-subtle); border-top: 1px solid var(--border-subtle); border-radius: 14px; box-shadow: none; min-height: 88px; } #page-alltools .tool-tile:first-child { border-top: 1px solid var(--border-subtle); } #page-alltools .tool-tile-main { flex-direction: column; align-items: flex-start; gap: 8px; height: 100%; padding: 12px 26px 12px 12px; } #page-alltools .tool-tile-main .icon-chip { width: 36px; height: 36px; flex: 0 0 36px; border-radius: var(--r-full); background: var(--primary-container); color: var(--primary); } #page-alltools .tool-tile-main .tool-launch-text { display: flex; flex-direction: column; gap: 2px; } #page-alltools .tool-tile-main .headline-sm { font: 700 13.5px/1.2 var(--font-ui); letter-spacing: -.01em; color: var(--ink); } #page-alltools .tool-tile-main .body-sm { font: 500 12px/1.3 var(--font-ui); color: var(--ink-muted); -webkit-line-clamp: 2; } /* Keep Stage 2B's chevron affordance, repositioned for the taller card. */ #page-alltools .tool-tile-main::after { top: auto; bottom: 14px; right: 12px; border-color: var(--ink-faint); } /* ---- References + Settings: reuse the reskin card tokens (Stage 2B list shapes already apply; just warm them to the new surfaces + round them to --r-card). No dedicated mockup, so this only aligns them with the design system rather than a pixel target. ---- */ #page-referencehub .hub-card-grid, #page-settings .settings-card { border-radius: var(--r-card); box-shadow: var(--shadow-card); } } /* --------------------------------------------------------------------- Wave 3a -- Search landing page (mockup m11). Built + driven by js/modules/mobile-search.js into #mobileSearchBody. Reuses the reskin card tokens: a rounded search field, pill filter chips, grouped result cards (tinted section icon + count), tappable rows (per-tool --tool-icon glyph, formula glyph, or workspace initials avatar), and recent-search chips. Phone-only; desktop never routes here. --------------------------------------------------------------------- */ @media (max-width: 640px) { /* Scoped to `.active` -- a bare `#page-search{display:flex}` is (1,0,0) and would beat the router's `.page:not(.active){display:none}`, leaving Search rendered under every other page (see the same note on #page-dashboard above). */ #page-search.active { display: flex; flex-direction: column; } #mobileSearchBody { display: flex; flex-direction: column; gap: 14px; } /* ---- Search field ---- */ .msr-field { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 12px 0 16px; border-radius: 14px; border: 1px solid var(--border-subtle); background: var(--surface-card); box-shadow: var(--shadow-card); } .msr-field:focus-within { border-color: var(--primary); box-shadow: var(--shadow-card), 0 0 0 3px var(--primary-tint); } .msr-field-ic { flex: 0 0 auto; color: var(--ink-muted); display: inline-flex; } .msr-input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font: 500 16px/1.2 var(--font-ui); color: var(--ink); padding: 0; -webkit-appearance: none; appearance: none; } .msr-input::placeholder { color: var(--ink-faint); } .msr-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } .msr-clear { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 0; border-radius: var(--r-full); background: var(--surface-mid); color: var(--ink-muted); cursor: pointer; } .msr-clear[hidden] { display: none; } /* ---- Filter chips ---- */ .msr-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; } .msr-chips::-webkit-scrollbar { display: none; } .msr-chip { flex: 0 0 auto; min-height: 38px; padding: 0 16px; border: 1px solid var(--border-subtle); border-radius: var(--r-full); background: var(--surface-card); color: var(--ink-muted); font: 600 14px/1 var(--font-ui); cursor: pointer; white-space: nowrap; } .msr-chip.is-active { background: var(--primary); border-color: var(--primary); color: var(--on-primary); } /* ---- Result groups ---- */ .msr-results { display: flex; flex-direction: column; gap: 14px; } .msr-group { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 6px; } .msr-group-head { display: flex; align-items: center; gap: 10px; padding: 10px 10px 8px; } .msr-group-ic { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--r-full); background: var(--primary-container); color: var(--primary); } .msr-group-title { flex: 1; min-width: 0; margin: 0; font: 700 16px/1.2 var(--font-ui); letter-spacing: -.01em; color: var(--ink); } .msr-group-count { flex: 0 0 auto; font: 600 13px/1 var(--font-ui); color: var(--ink-muted); } .msr-group-body { display: flex; flex-direction: column; } /* ---- Result rows ---- */ .msr-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 10px; border: 0; border-top: 1px solid var(--border-subtle); background: none; text-align: left; cursor: pointer; font-family: inherit; } .msr-group-body .msr-row:first-child { border-top: 0; } .msr-row:active { background: var(--surface-low); border-radius: 12px; } .msr-ic, .msr-avatar, .msr-ic-more { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--primary-tint); color: var(--primary); } .msr-avatar { border-radius: var(--r-full); font: 700 13px/1 var(--font-ui); letter-spacing: .02em; text-transform: uppercase; } .msr-ic-more { font: 700 18px/1 var(--font-ui); } /* Per-tool glyph painted from the shared --tool-icon var (set on [data-page="id"] in shell.css). */ .msr-ic[data-page] { font-size: 0; } .msr-ic[data-page]::before { content: ""; display: block; width: 22px; height: 22px; background-color: currentColor; -webkit-mask: var(--tool-icon) center / 22px 22px no-repeat; mask: var(--tool-icon) center / 22px 22px no-repeat; } .msr-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .msr-title { font: 700 15px/1.25 var(--font-ui); letter-spacing: -.01em; color: var(--ink); } .msr-sub { font: 500 13px/1.3 var(--font-ui); color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .msr-chev { flex: 0 0 auto; color: var(--ink-faint); display: inline-flex; } /* ---- Empty state ---- */ .msr-empty { padding: 32px 16px; text-align: center; } .msr-empty-title { margin: 0; font: 700 16px/1.3 var(--font-ui); color: var(--ink); } .msr-empty-sub { margin: 6px 0 0; font: 500 14px/1.4 var(--font-ui); color: var(--ink-muted); } /* ---- Recent searches ---- */ .msr-recent { padding-top: 2px; } .msr-recent-title { margin: 0 0 10px; font: 700 15px/1.2 var(--font-ui); color: var(--ink); } .msr-recent-chips { display: flex; flex-wrap: wrap; gap: 8px; } .msr-recent-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 1px solid var(--border-subtle); border-radius: var(--r-full); background: var(--surface-card); color: var(--ink); font: 500 14px/1 var(--font-ui); cursor: pointer; } .msr-recent-chip-ic { flex: 0 0 auto; color: var(--ink-faint); display: inline-flex; } } /* --------------------------------------------------------------------- Wave 3b -- Workspace landing page (mockup m12), built + driven by js/modules/mobile-workspace.js into #mobileWorkspaceBody. Backed-only (2026-08-12 ruling): summary = Active + Recently-updated; filter chips = All / Recent (no Archived); "Primary tool" from the saved regimen when present. Row tap / Create open the EXISTING #patientDashboardPanel (m30) / edit flow (m29), which this wave also presents as full-screen phone sheets (their internal pixel reskin lands in Wave 3c). --------------------------------------------------------------------- */ @media (max-width: 640px) { /* Scoped to `.active` -- see the #page-search / #page-dashboard note: a bare id rule (1,0,0) would override the router's `.page:not(.active){display:none}` and render Workspace under every page. */ #page-workspace.active { display: flex; flex-direction: column; } #mobileWorkspaceBody { display: flex; flex-direction: column; gap: 14px; } /* ---- Summary card (Active + Recently updated) ---- */ .mws-summary { display: flex; align-items: stretch; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 16px; } .mws-summary-div { width: 1px; align-self: stretch; margin: 0 14px; background: var(--border-subtle); } .mws-stat { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; } .mws-stat-ic { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-full); background: var(--primary-container); color: var(--primary); } .mws-stat-body { min-width: 0; display: flex; flex-direction: column; } .mws-stat-num { font: 700 24px/1 var(--font-ui); color: var(--ink); font-variant-numeric: tabular-nums; } .mws-stat-label { font: 600 13px/1.2 var(--font-ui); color: var(--ink); margin-top: 3px; } .mws-stat-sub { font: 500 12px/1.2 var(--font-ui); color: var(--ink-muted); margin-top: 1px; } /* ---- Filter chips ---- */ .mws-chips { display: flex; gap: 8px; } .mws-chip { flex: 0 0 auto; min-height: 38px; padding: 0 18px; border: 1px solid var(--border-subtle); border-radius: var(--r-full); background: var(--surface-card); color: var(--ink-muted); font: 600 14px/1 var(--font-ui); cursor: pointer; } .mws-chip.is-active { background: var(--primary); border-color: var(--primary); color: var(--on-primary); } /* ---- Search-within field ---- */ .mws-search { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 16px; border: 1px solid var(--border-subtle); border-radius: 14px; background: var(--surface-card); box-shadow: var(--shadow-card); } .mws-search:focus-within { border-color: var(--primary); box-shadow: var(--shadow-card), 0 0 0 3px var(--primary-tint); } .mws-search-ic { flex: 0 0 auto; color: var(--ink-muted); display: inline-flex; } .mws-search-input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font: 500 15px/1.2 var(--font-ui); color: var(--ink); -webkit-appearance: none; appearance: none; } .mws-search-input::placeholder { color: var(--ink-faint); } .mws-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } /* ---- Workspace rows ---- */ .mws-list { display: flex; flex-direction: column; gap: 12px; } .mws-empty { margin: 8px 2px; font: 500 14px/1.4 var(--font-ui); color: var(--ink-muted); } .mws-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; border: 1px solid var(--border-subtle); border-radius: var(--r-card); background: var(--surface-card); box-shadow: var(--shadow-card); text-align: left; cursor: pointer; font-family: inherit; } .mws-row:active { background: var(--surface-low); } .mws-avatar { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--r-full); background: var(--primary-container); color: var(--primary); font: 700 15px/1 var(--font-ui); letter-spacing: .02em; text-transform: uppercase; } .mws-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .mws-name { font: 700 18px/1.15 var(--font-ui); letter-spacing: -.01em; color: var(--ink); } .mws-age { font: 500 13px/1.3 var(--font-ui); color: var(--ink-muted); } .mws-weight { font: 500 12.5px/1.3 var(--font-ui); color: var(--ink-faint); } .mws-meta { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding-left: 10px; } .mws-meta .mws-updated-label { font: 600 10.5px/1.2 var(--font-ui); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); } .mws-meta .mws-updated { font: 500 12px/1.3 var(--font-ui); color: var(--ink-muted); text-align: right; } .mws-chev { flex: 0 0 auto; color: var(--ink-faint); display: inline-flex; margin-top: 2px; } /* ---- Create-workspace CTA ---- */ .mws-create { display: flex; align-items: center; gap: 14px; width: 100%; padding: 18px 16px; border: 1.5px dashed var(--border-strong); border-radius: var(--r-card); background: transparent; text-align: left; cursor: pointer; font-family: inherit; } .mws-create:active { background: var(--surface-low); } .mws-create-ic { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--r-full); background: var(--primary-container); color: var(--primary); } .mws-create-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .mws-create-title { font: 400 19px/1.15 var(--font-display); color: var(--ink); } .mws-create-sub { font: 500 13px/1.35 var(--font-ui); color: var(--ink-muted); } /* ---- Existing workspace panels presented as full-screen phone sheets (m30/m29 functional shell; internal pixel reskin is Wave 3c). Both share .patient-edit-panel. z-index 35 sits above the sticky topbar (30) but below the tab bar (40), which stays visible per the mockups. ---- */ #patientEditPanel, #patientDashboardPanel { position: fixed; inset: 0; z-index: 35; margin: 0; max-width: none; width: auto; border-radius: 0; border: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--bg); padding: 56px max(16px, env(safe-area-inset-left)) calc(76px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-right)); } .ws-sheet-back { position: absolute; top: 10px; left: 8px; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: var(--r-full); background: transparent; color: var(--primary); cursor: pointer; } .ws-sheet-back:active { background: var(--surface-low); } } /* The phone back chevrons never show on desktop/tablet (the panels there are inline, not sheets). */ .ws-sheet-back { display: none; } @media (max-width: 640px) { .ws-sheet-back { display: inline-flex; } } /* --------------------------------------------------------------------- Wave 3c -- m30 "Workspace Summary" internal pixel reskin. The #patientDashboardPanel is shared desktop+phone. To keep desktop UNTOUCHED, the panel now carries TWO presentation layers: the original .pd-desktop
(desktop, unchanged) and a phone-only .pdx block (this wave). Base rules hide .pdx; the 640px query hides .pd-desktop and shows .pdx. Both are populated from the SAME already-synced shared values -- .pdx by populatePhoneDashboard() in patient-profile.js -- so nothing new is computed (observe-never- calculate holds). The three Nutrition bars are delivered/goal ratios of already-synced values, the same shape as the accepted fluid bar; each fills only when both operands are present. Fidelity deviations logged: no in-sheet "My Workspace" switcher pill (reachable one back-tap out); Growth sparklines omitted (no clean trend series is synced -- values shown, charts not faked). --------------------------------------------------------------------- */ .pdx, .pdx-head { display: none; } @media (max-width: 640px) { #patientDashboardPanel { padding-top: 8px; } #patientDashboardPanel .pd-desktop { display: none; } /* ---- Sheet header: back chevron (absolute) + serif title on one row ---- */ .pdx-head { display: flex; align-items: center; min-height: 44px; padding: 0 8px 6px 44px; } .pdx-title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 27px; line-height: 1.1; letter-spacing: 0; color: var(--primary); } .pdx { display: flex; flex-direction: column; gap: 14px; } .pdx-card { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 16px; } /* ---- Identity header ---- */ .pdx-identity { display: flex; align-items: center; gap: 14px; } .pdx-avatar { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--r-full); background: var(--primary-container); color: var(--primary); font: 700 17px/1 var(--font-ui); letter-spacing: .02em; text-transform: uppercase; } .pdx-identity-text { min-width: 0; } .pdx-identity-age { font: 700 21px/1.15 var(--font-ui); letter-spacing: -.01em; color: var(--ink); } .pdx-identity-sub { margin-top: 3px; font: 500 14px/1.3 var(--font-ui); color: var(--ink-muted); } .pdx-mid-dot { color: var(--ink-faint); padding: 0 2px; } .pdx-active { color: var(--primary); font-weight: 600; } /* ---- Vitals grid (3-up) + full-width tile ---- */ .pdx-vitals { margin-top: 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .pdx-tile { padding: 11px 10px 12px; border: 1px solid var(--border-subtle); border-radius: 14px; min-width: 0; } .pdx-tile-wide { margin-top: 8px; } .pdx-tile-top { display: flex; align-items: center; gap: 6px; } .pdx-tile-label { font: 600 11.5px/1.2 var(--font-ui); color: var(--ink-muted); min-width: 0; } .pdx-tile-val { margin-top: 7px; font: 700 18px/1.15 var(--font-ui); color: var(--ink); font-variant-numeric: tabular-nums; } .pdx-tile-sub { margin-top: 3px; font: 500 11.5px/1.25 var(--font-ui); color: var(--ink-faint); } .pdx-tile-sub:empty { display: none; } /* ---- Icon masks (currentColor-tinted line glyphs) ---- */ .pdx-ic { flex: 0 0 auto; width: 16px; height: 16px; color: var(--primary); } .pdx-card-ic, .pdx-regimen-ic { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-full); background: var(--primary-container); color: var(--primary); } .pdx-card-ic { width: 34px; height: 34px; } .pdx-card-ic::after { content: ""; display: block; width: 19px; height: 19px; background-color: currentColor; -webkit-mask: var(--ic) center/contain no-repeat; mask: var(--ic) center/contain no-repeat; } .pdx-regimen-ic { width: 44px; height: 44px; } .pdx-regimen-ic::after { content: ""; display: block; width: 24px; height: 24px; background-color: currentColor; -webkit-mask: var(--ic) center/contain no-repeat; mask: var(--ic) center/contain no-repeat; } .pdx-ic::before { content: ""; display: block; width: 100%; height: 100%; background-color: currentColor; -webkit-mask: var(--ic) center/contain no-repeat; mask: var(--ic) center/contain no-repeat; } [data-ic="age"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='16' rx='2.5'/%3E%3Cpath d='M3 9h18M8 2.5v4M16 2.5v4'/%3E%3C/svg%3E"); } [data-ic="sex"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3Cpath d='M5 21c0-4 3-7 7-7s7 3 7 7'/%3E%3C/svg%3E"); } [data-ic="weight"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 8h10l1.6 12H5.4z'/%3E%3Cpath d='M9 8a3 3 0 0 1 6 0'/%3E%3C/svg%3E"); } [data-ic="workspace"]{ --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.5a2 2 0 0 1 2-2h3.6l2 2.2H19a2 2 0 0 1 2 2V17a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E"); } [data-ic="length"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='8' width='19' height='8' rx='1.5'/%3E%3Cpath d='M7 8v3M11 8v4M15 8v3'/%3E%3C/svg%3E"); } [data-ic="clock"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E"); } [data-ic="regimen"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 3h5M10.5 3v2.5M13.5 3v2.5M8.5 10a3.5 3.5 0 0 1 7 0v8.4a2 2 0 0 1-2 2h-3a2 2 0 0 1-2-2z'/%3E%3Cpath d='M8.5 13.5h7'/%3E%3C/svg%3E"); } [data-ic="needs"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='2'/%3E%3Cpath d='M8.5 7h7M8.5 12h2.5M13.5 12h2M8.5 16h2.5M13.5 16h2'/%3E%3C/svg%3E"); } [data-ic="growth"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16M4 18l5-6 4 3 6-8'/%3E%3C/svg%3E"); } /* ---- Current Regimen card ---- */ .pdx-regimen { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--r-card); box-shadow: var(--shadow-card); } .pdx-regimen-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .pdx-regimen-kicker { font: 700 15px/1.2 var(--font-ui); color: var(--ink); } .pdx-regimen-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pdx-regimen-name { font: 500 14px/1.3 var(--font-ui); color: var(--ink-muted); min-width: 0; } .pdx-regimen-sub { font: 500 12.5px/1.3 var(--font-ui); color: var(--ink-faint); } .pdx-regimen-sub:empty { display: none; } .pdx-badge { flex: 0 0 auto; padding: 2px 9px; border-radius: var(--r-full); background: var(--primary-tint); color: var(--primary); font: 600 11px/1.4 var(--font-ui); } /* ---- Card title (with optional round icon) ---- */ .pdx-card-title-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .pdx-card-title { font: 700 16px/1.2 var(--font-ui); color: var(--ink); } .pdx-card > .pdx-card-title { margin-bottom: 12px; } .pdx-card-title-note { font-weight: 500; color: var(--ink-muted); } /* ---- Nutrition bars (3-up: fluid / energy / protein) ---- */ .pdx-bars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .pdx-bar-col { min-width: 0; } .pdx-bar-head { font: 600 13.5px/1.2 var(--font-ui); color: var(--ink); } .pdx-bar-unit { margin-top: 2px; font: 500 11px/1.2 var(--font-ui); color: var(--ink-muted); } .pdx-bar-val { margin-top: 10px; font: 700 20px/1.1 var(--font-ui); color: var(--ink); font-variant-numeric: tabular-nums; } .pdx-bar-track { margin-top: 8px; height: 6px; border-radius: var(--r-full); background: var(--border-subtle); overflow: hidden; } .pdx-bar-fill { display: block; height: 100%; width: 0; border-radius: var(--r-full); background: var(--primary); transition: width .2s ease; } .pdx-bar-sub { margin-top: 8px; font: 500 11.5px/1.25 var(--font-ui); color: var(--ink-faint); } /* ---- Full readout disclosure (parity: complete readout one tap deeper) ---- */ .pdx-other-regimens { margin: 14px 0 0; font: 500 12.5px/1.35 var(--font-ui); color: var(--ink-muted); } .pdx-details { margin-top: 14px; border-top: 1px solid var(--border-subtle); padding-top: 12px; } .pdx-details-summary { font: 700 13px/1 var(--font-ui); color: var(--primary); cursor: pointer; list-style: none; } .pdx-details-summary::-webkit-details-marker { display: none; } .pdx-details[open] .pdx-details-summary { margin-bottom: 10px; } .pdx-readout { margin: 0; white-space: pre-wrap; word-break: break-word; font: 500 12.5px/1.5 var(--font-mono, ui-monospace, monospace); color: var(--ink); } /* ---- Estimated Needs / Growth (2-up) ---- */ .pdx-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .pdx-duo-col { min-width: 0; } .pdx-duo-label { font: 500 13px/1.2 var(--font-ui); color: var(--ink-muted); } .pdx-duo-val { margin-top: 6px; font: 700 21px/1.1 var(--font-ui); color: var(--ink); font-variant-numeric: tabular-nums; } .pdx-duo-sub { margin-top: 4px; font: 500 12.5px/1.3 var(--font-ui); color: var(--ink-faint); } .pdx-duo-sub:empty { display: none; } .pdx-foot { margin: 2px 2px 0; font: 500 11.5px/1.5 var(--font-ui); color: var(--ink-faint); } } /* --------------------------------------------------------------------- Wave 3c -- m29 "Edit workspace details" internal pixel reskin. Same shared-panel discipline as m30: the #patientEditPanel markup is untouched on desktop. The phone reskin restyles the EXISTING form in place (per-row label/field, serif title) and reveals three phone-only additions -- a subtitle, a segmented Male/Female control (mirrors the hidden native hidden; syncs to it via JS) ---- */ #patientEditPanel #patientSex { display: none; } .pe-seg { grid-column: 2; grid-row: 1; display: inline-flex; gap: 3px; padding: 3px; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--surface-low); } .pe-seg-btn { flex: 1; min-height: 42px; border: 0; border-radius: 9px; cursor: pointer; background: transparent; color: var(--ink-muted); font: 600 15px/1 var(--font-ui); } .pe-seg-btn.is-active { background: var(--primary-container); color: var(--primary); box-shadow: var(--shadow-card); } /* ---- "Stored in this browser only" info box (replaces the desktop footnote on phone) ---- */ #patientEditPanel > .footnote { display: none; } .pe-infobox { display: flex; gap: 12px; margin-top: 18px; padding: 16px; border-radius: 14px; background: var(--surface-low); } .pe-infobox-ic { flex: 0 0 auto; width: 24px; height: 24px; border-radius: var(--r-full); border: 1.5px solid var(--ink-muted); color: var(--ink-muted); display: inline-flex; align-items: center; justify-content: center; font: 700 13px/1 var(--font-ui); font-style: italic; } .pe-infobox-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .pe-infobox-text strong { font: 700 15px/1.2 var(--font-ui); color: var(--ink); } .pe-infobox-text span { font: 500 13px/1.45 var(--font-ui); color: var(--ink-muted); } /* ---- Actions: Clear (danger outline) left; Cancel (outline) + Save (filled) right ---- */ #patientEditPanel .patient-edit-actions { display: flex; align-items: center; gap: 10px; margin-top: 18px; } #patientEditPanel .patient-edit-actions .btn { min-height: 48px; border-radius: 12px; padding: 0 18px; font: 600 15px/1 var(--font-ui); } #patientEditPanel .patient-edit-actions #patientClearBtn { margin-right: auto; padding: 0 14px; } } /* --------------------------------------------------------------------- Wave 4 -- per-calculator result-card placement. Wave 2c added the inline result card but appended it to the page root, so on gir/pn/mns/chylo it rendered at the very bottom (after the reference tables). Wave 4 moves each card in-flow (in the module JS) to sit right after its result surface / before the reference content, matching the mockups. On the form-bearing calculators (gir, chylo) the card fully duplicates a result region that is still visible on phone; that region is tagged .mshell-inline-dupe and hidden here so the card is the sole mobile result (the interpretation/summary sentence is intentionally NOT tagged, so it stays). Desktop is unaffected -- the class only hides inside the phone breakpoint. --------------------------------------------------------------------- */ @media (max-width: 640px) { .mshell-inline-dupe { display: none; } } /* --------------------------------------------------------------------- Wave 4b -- GIR Calculator (mockup m33) per-page reskin. Pure-presentation pass: every value shown is already computed by gir.js (observe-never-calculate holds -- nothing new is derived here). The shared #page-gir markup is untouched; all of this is phone-only CSS + the two gir.js placement/title edits. Fidelity deviations (logged): the page title stays in the topbar "< GIR Calculator" row (Wave 1 sub-page pattern, kept for back-nav consistency with the other 15 calculators) rather than m33's large body serif; the .page-subtitle keeps its desktop copy; result stat cells show value-then-label (dock order) rather than m33's label-on-top; the ASPEN reference rows carry no per-population avatar (the table is shared with desktop). The m33 "Interpretation" banner is intentionally NOT built here -- it is new derived clinical content (classifying GIR against the band ranges) and is held for a maintainer ruling. --------------------------------------------------------------------- */ @media (max-width: 640px) { /* ---- Subtitle (m33): reveal the in-page subtitle under the topbar title; drop the redundant h1 ---- */ #page-gir > .page-header { display: block; } #page-gir > .page-header h1 { display: none; } #page-gir > .page-header .page-subtitle { display: block; margin: -2px 0 6px; font: 500 15px/1.4 var(--font-ui); color: var(--ink-muted); } /* ---- Calculator card header: sage round icon + heading ---- */ #page-gir > section > .card-header { align-items: center; gap: 12px; } #page-gir > section > .card-header .icon-chip { width: 40px; height: 40px; flex: 0 0 40px; border-radius: var(--r-full); background: var(--primary-container); color: var(--primary); } #page-gir > section > .card-header .icon-chip .icon { width: 21px; height: 21px; } #page-gir > section > .card-header h2 { font: 700 18px/1.2 var(--font-ui); letter-spacing: -.01em; color: var(--ink); } /* ---- Inputs: 2-up rows (override the global phone stack) to match m33's density ---- */ #page-gir .grid-2 { grid-template-columns: 1fr 1fr; gap: 12px; } /* ---- m33 omits the summary/copy box -- the results panel is the phone summary ---- */ #page-gir .dw-summary-box { display: none; } /* ---- "Calculated Results" -- restyle the in-flow dock card into m33's nested sage panel ---- */ #girMobileResults.mobile-result-dock:not([hidden]) { background: var(--primary-tint); border: 1px solid var(--primary-container); box-shadow: none; border-radius: 16px; margin: 18px 0 0; padding: 14px; } #girMobileResults .rc-head { margin-bottom: 12px; } #girMobileResults .rc-title { font: 700 15px/1.2 var(--font-ui); color: var(--ink); } #girMobileResults .rc-grid { gap: 10px 8px; } /* Icon circle (left) spanning both text rows; value over label (right). */ #girMobileResults .rc-cell { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: 8px; row-gap: 1px; } #girMobileResults .rc-cell::before { content: ""; grid-row: 1 / 3; grid-column: 1; width: 30px; height: 30px; border-radius: var(--r-full); background: var(--surface-card) var(--rc-ic) center / 17px 17px no-repeat; } #girMobileResults .rc-val { grid-row: 1; grid-column: 2; font: 700 19px/1.15 var(--font-ui); } #girMobileResults .rc-lbl { grid-row: 2; grid-column: 2; } /* Forest-stroke line glyphs: droplet (GIR) / vial (dextrose/day) / IV drip (rate used). */ #girMobileResults .rc-cell:nth-child(1) { --rc-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F4A34' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3s6 6.4 6 11a6 6 0 0 1-12 0c0-4.6 6-11 6-11z'/%3E%3C/svg%3E"); } #girMobileResults .rc-cell:nth-child(2) { --rc-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F4A34' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='2.5' width='8' height='3.5' rx='1'/%3E%3Cpath d='M9 6h6v12.5a3 3 0 0 1-6 0z'/%3E%3Cpath d='M9 12h6'/%3E%3C/svg%3E"); } #girMobileResults .rc-cell:nth-child(3) { --rc-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F4A34' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5v6'/%3E%3Cpath d='M9.5 8.5h5a1 1 0 0 1 1 1v8a2.5 2.5 0 0 1-2.5 2.5h-2a2.5 2.5 0 0 1-2.5-2.5v-8a1 1 0 0 1 1-1z'/%3E%3Cpath d='M12 12v4'/%3E%3C/svg%3E"); } /* ---- ASPEN reference table: always visible on phone (m33), warmed to the reskin card ---- */ #page-gir #girRefRangeBox { display: block !important; } #page-gir #girRefRangeBox > .card-header .icon-chip { width: 40px; height: 40px; flex: 0 0 40px; border-radius: var(--r-full); background: var(--primary-container); color: var(--primary); } #page-gir #girRefRangeBox > .card-header .icon-chip .icon { width: 21px; height: 21px; } #page-gir #girRefRangeBox > .card-header h2 { font: 700 16px/1.25 var(--font-ui); letter-spacing: -.01em; color: var(--ink); } #page-gir #girRefTable { font-variant-numeric: tabular-nums; } #page-gir #girRefTable th { font: 600 11px/1.25 var(--font-ui); color: var(--ink-muted); text-transform: none; letter-spacing: 0; } #page-gir #girRefTable td { font: 500 13px/1.3 var(--font-ui); color: var(--ink); } #page-gir #girRefTable td:first-child { font-weight: 600; } #page-gir #girRefTable tr.ref-row-highlight td { background: var(--primary-tint); } /* ---- Interpretation banner (m33): factual range-comparison, tone-tinted ---- */ .gir-interp:not([hidden]) { display: flex; align-items: flex-start; gap: 12px; margin: 14px 0 0; padding: 14px; border-radius: 16px; background: var(--success-bg); border: 1px solid var(--primary-container); } .gir-interp[data-tone="mid"] { background: var(--info-bg); border-color: color-mix(in srgb, var(--info) 24%, transparent); } .gir-interp[data-tone="out"] { background: var(--warning-bg); border-color: color-mix(in srgb, var(--warning) 30%, transparent); } .gir-interp-ic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: var(--r-full); background: var(--primary-container); -webkit-mask: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F4A34' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 19px 19px; } .gir-interp[data-tone="mid"] .gir-interp-ic { background-color: var(--info-bg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233B78C9' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 10.5v5.5M12 7.6v.02'/%3E%3C/svg%3E"); } .gir-interp[data-tone="out"] .gir-interp-ic { background-color: var(--warning-bg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E08A2B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5L2.5 20h19z'/%3E%3Cpath d='M12 10v4.5M12 17.4v.02'/%3E%3C/svg%3E"); } .gir-interp-body { flex: 1; min-width: 0; } .gir-interp-title { font: 700 14.5px/1.2 var(--font-ui); color: var(--ink); } .gir-interp-text { margin: 4px 0 0; font: 500 13px/1.4 var(--font-ui); color: var(--ink-muted); } .gir-interp-pill { flex: 0 0 auto; align-self: center; padding: 5px 10px; border-radius: var(--r-full); font: 600 11px/1.25 var(--font-ui); text-align: center; background: var(--primary-container); color: var(--primary); } .gir-interp[data-tone="mid"] .gir-interp-pill { background: var(--info-bg); color: var(--info); } .gir-interp[data-tone="out"] .gir-interp-pill { background: var(--warning-bg); color: var(--warning); } } /* Desktop/tablet: the phone-only Interpretation banner never shows (desktop GIR is unchanged). */ .gir-interp { display: none; } /* --------------------------------------------------------------------- Wave 4b -- Chylothorax (mockup m18) reskin. Maintainer ruling 2026-08-12: RESKIN THE EXISTING FUNCTION only. m18 shows surfaces this calculator does not compute (a feed-source picker, a "Formula strategy" example regimen, a "Monitoring" guide); those are NOT built -- they'd be new clinical content needing their own sourcing. So this warms the existing sections (Formula & Feeds, Modular Oil, Totals & Adequate Intake, EFA-adequacy targets) to the reskin card system: sage round section icons (over the desktop dark-slate chips), reskinned headings, flat 3-up totals, dividered detail rows. Shared markup untouched; phone-only CSS. Logged deviations: no m18 feed-source picker / example regimen / monitoring guide; the .page-subtitle keeps its desktop copy; the calculator's own inputs stay (m18 hides them behind Edit rows). --------------------------------------------------------------------- */ @media (max-width: 640px) { /* ---- Subtitle: reveal under the topbar title; drop the redundant h1 ---- */ #page-chylo > .page-header { display: block; } #page-chylo > .page-header h1 { display: none; } #page-chylo > .page-header .page-subtitle { display: block; margin: -2px 0 6px; font: 500 15px/1.4 var(--font-ui); color: var(--ink-muted); } /* ---- Card headers: sage round icon + reskinned heading (all sections) ---- */ #page-chylo .card-header { align-items: center; gap: 12px; } #page-chylo .card-header .icon-chip { width: 40px; height: 40px; flex: 0 0 40px; border-radius: var(--r-full); background: var(--primary-container); color: var(--primary); } #page-chylo .card-header .icon-chip .icon { width: 21px; height: 21px; } #page-chylo .card-header h2 { font: 700 18px/1.2 var(--font-ui); letter-spacing: -.01em; text-transform: none; color: var(--ink); } /* ---- Sub-headings inside a card ("Adequate Intake for Age", EFA targets) ---- */ #page-chylo .card-subhead { font: 700 13px/1.3 var(--font-ui); text-transform: none; letter-spacing: 0; color: var(--ink); } /* ---- Totals: flat 3-up cells (over the desktop dark-bordered boxes) ---- */ #page-chylo .stat-row { grid-template-columns: repeat(3, 1fr); gap: 8px; } #page-chylo .stat { background: none; border: 0; box-shadow: none; padding: 0; text-align: left; } #page-chylo .stat .num { font: 700 20px/1.1 var(--font-ui); color: var(--primary); font-variant-numeric: tabular-nums; } #page-chylo .stat .lbl { font: 600 11px/1.2 var(--font-ui); color: var(--ink-muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 3px; } /* ---- Detail readout rows: subtle dividers, muted label / ink value ---- */ #page-chylo .detail-line { border-top: 1px solid var(--border-subtle); padding: 9px 0; font: 500 13.5px/1.35 var(--font-ui); color: var(--ink); } #page-chylo .detail-line > span:first-child { color: var(--ink-muted); } } /* --------------------------------------------------------------------- Wave 4b -- Micronutrient Adequacy Screen (mockup m35) reskin. Pure-presentation pass: every value shown (intake, DRI, % DRI, the "Above UL" flag, the coverage tally) is already computed by micronutrient-screen(-view).js -- observe-never-calculate holds, and the shared #page-micronutrientscreen markup is untouched (phone-only CSS). This warms the existing sections (Patient inputs, Day's Intake, the Screen table, the Coverage-Summary result card, the "does not cover" note) to the reskin card system, mirroring the #page-gir vocabulary. Logged fidelity deviations (m35 vs the existing function -- deliberately NOT built here): - m35 adds a per-nutrient "Status" column reading Adequate / Low / Above UL against a 71% DRI cutoff, and reframes the Coverage Summary as a 3-up Adequate/Low/Above-UL count. That 71% adequacy threshold is NOT in the current tool and is not sourced; worse, the calculator DELIBERATELY refuses adequacy grading (see micronutrient-screen-view.js renderStatus: it reports comparability states -- compared / not-comparable / coverage-incomplete / no-reference -- plus the factual "Above UL" flag, and its own comments explain why a green "adequate" banner would misstate a coverage gap). Adding Adequate/Low is new clinical content needing sourcing + a maintainer ruling, so it is FLAGGED, not built (same posture as the chylo m18 new-surfaces ruling). The existing % DRI value + "Above UL" chip (both factual, already on screen) are kept. - Patient inputs stay editable (m35 shows a read-only 4-up summary with an Edit affordance). - The Coverage-Summary result card keeps its "View details" disclosure for the full per-state name lists (Wave 2c results-only pattern) rather than m35's always-expanded 3-up. - The .page-subtitle keeps its desktop copy. --------------------------------------------------------------------- */ @media (max-width: 640px) { /* ---- Subtitle: reveal under the topbar title; drop the redundant h1 ---- */ #page-micronutrientscreen > .page-header { display: block; } #page-micronutrientscreen > .page-header h1 { display: none; } #page-micronutrientscreen > .page-header .page-subtitle { display: block; margin: -2px 0 6px; font: 500 15px/1.4 var(--font-ui); color: var(--ink-muted); } /* ---- Card headers: sage round icon + reskinned heading (all sections, incl. the result rail) ---- */ #page-micronutrientscreen .card-header { align-items: center; gap: 12px; } #page-micronutrientscreen .card-header .icon-chip { width: 40px; height: 40px; flex: 0 0 40px; border-radius: var(--r-full); background: var(--primary-container); color: var(--primary); } #page-micronutrientscreen .card-header .icon-chip .icon { width: 21px; height: 21px; } #page-micronutrientscreen .card-header h2 { font: 700 18px/1.2 var(--font-ui); letter-spacing: -.01em; text-transform: none; color: var(--ink); } /* ---- Screen table (m35 "Screen Results"): warm the type; keep the % DRI + "Above UL" flag ---- */ #page-micronutrientscreen .mns-table th { font: 600 11px/1.25 var(--font-ui); color: var(--ink-muted); text-transform: none; letter-spacing: 0; } #page-micronutrientscreen .mns-table td, #page-micronutrientscreen .mns-table th[scope="row"] { font: 500 13px/1.3 var(--font-ui); color: var(--ink); } #page-micronutrientscreen .mns-table th[scope="row"] { font-weight: 600; color: var(--ink); } #page-micronutrientscreen .mns-percent { font-weight: 700; } #page-micronutrientscreen .mns-ul-chip { font: 600 10.5px/1.2 var(--font-ui); padding: 2px 7px; border-radius: var(--r-full); } /* ---- "Coverage Summary" -- restyle the in-flow dock card into m35's nested sage result panel ---- */ #mnsMobileResults.mobile-result-dock:not([hidden]) { background: var(--primary-tint); border: 1px solid var(--primary-container); box-shadow: none; border-radius: 16px; margin: 18px 0 0; padding: 14px; } #mnsMobileResults .rc-head { margin-bottom: 12px; } #mnsMobileResults .rc-title { font: 700 15px/1.2 var(--font-ui); color: var(--ink); } #mnsMobileResults .rc-grid { gap: 10px 8px; } /* Icon circle (left) spanning both text rows; value over label (right) -- same shape as #girMobileResults. */ #mnsMobileResults .rc-cell { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: 8px; row-gap: 1px; } #mnsMobileResults .rc-cell::before { content: ""; grid-row: 1 / 3; grid-column: 1; width: 30px; height: 30px; border-radius: var(--r-full); background: var(--surface-card) var(--rc-ic) center / 17px 17px no-repeat; } #mnsMobileResults .rc-val { grid-row: 1; grid-column: 2; font: 700 16px/1.2 var(--font-ui); } #mnsMobileResults .rc-lbl { grid-row: 2; grid-column: 2; } /* Forest-stroke line glyphs: target (DRI bracket) / bar chart (coverage summary). */ #mnsMobileResults .rc-cell:nth-child(1) { --rc-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F4A34' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Ccircle cx='12' cy='12' r='3.5'/%3E%3C/svg%3E"); } #mnsMobileResults .rc-cell:nth-child(2) { --rc-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F4A34' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-7M4 20h16'/%3E%3C/svg%3E"); } /* "View details" disclosure -- forest link with chevron (reveals the full per-state name lists). */ #mnsMobileResults .rc-details { color: var(--primary); font: 600 12.5px/1.2 var(--font-ui); } /* When revealed, warm the Coverage-Summary breakdown to match (it renders inside the result rail). */ #page-micronutrientscreen .mns-status.is-ok { background: var(--primary-tint); } #page-micronutrientscreen .mns-status-summary { font: 500 13px/1.4 var(--font-ui); color: var(--ink); } #page-micronutrientscreen .mns-status-sublabel { font: 700 12px/1.3 var(--font-ui); color: var(--ink); } /* ---- "What this screen does not cover" (m35 info note): warm the details into an info card ---- */ #page-micronutrientscreen #mnsCoverageLimits { border: 1px solid var(--border-subtle); border-radius: 16px; background: var(--surface-low); padding: 4px 14px; } #page-micronutrientscreen #mnsCoverageLimits > summary { font: 700 14.5px/1.3 var(--font-ui); color: var(--ink); padding: 12px 0; list-style: none; } #page-micronutrientscreen #mnsCoverageLimits > summary::-webkit-details-marker { display: none; } #page-micronutrientscreen #mnsCoverageLimits .footnote { color: var(--ink-muted); } /* ---- Factual "Status" column (m35, "Factual status vs DRI" ruling): phone-only, revealed here ---- */ #page-micronutrientscreen .mns-status-col { display: table-cell; text-align: right; white-space: nowrap; } #page-micronutrientscreen .mns-status-col-empty { color: var(--ink-muted); } /* The Status column now carries the UL flag, so drop the duplicate chip stacked in the % DRI cell. */ #page-micronutrientscreen .mns-percent .mns-ul-chip { display: none; } .mns-status-pill { display: inline-block; padding: 3px 9px; border-radius: var(--r-full); font: 600 11px/1.25 var(--font-ui); white-space: nowrap; } .mns-status-pill-in { background: var(--primary-container); color: var(--primary); } .mns-status-pill-low { background: var(--surface-low); color: var(--ink-muted); border: 1px solid var(--border-subtle); } .mns-status-pill-out { background: var(--warning-bg); color: var(--warning); } } /* Desktop/tablet: the m35 factual Status column is phone-only -- hidden so desktop stays unchanged. */ .mns-status-col { display: none; } /* --------------------------------------------------------------------- Wave 4b -- Parenteral Nutrition worksheet (mockup m19) reskin. Maintainer ruling posture (same as chylo m18): RESKIN THE EXISTING FUNCTION only. The real PN worksheet is a full clinical tool; m19 shows a heavily simplified consumer view with surfaces this tool deliberately does NOT provide -- a Macros/Electrolytes/Summary TAB split, redesigned macro rows with an inline "Total: g/day", a restructured 4-up "Nutrient Output Summary", and a binary "Compatible" pill. The worksheet instead exposes formulation/volume/AA-product/lipid-type controls, salt-level electrolyte allocation, a published Ca-PO4 compatibility screen (which honestly reports "No applicable published envelope -- pharmacy verification required", NOT a green "Compatible"), and the ASPEN dosing reference tables. Those are not restructured here. This is a CSS-only pass warming the EXISTING sections to the reskin card system, mirroring #page-chylo / #page-gir. Shared markup untouched; phone-only. Logged deviations (m19 vs the existing function -- NOT built): the tab split; the macro-row redesign + inline per-substrate "Total: g/day"; the 4-up output-summary restructure; the binary "Compatible" pill (the nuanced compatibility screen is kept verbatim); a macro "within recommended ranges" banner (a factual multi-substrate-vs-ASPEN-dosing-band banner is a plausible follow-up but is new interpretive content over the PN dosing bands -- flagged for a maintainer ruling, like the GIR banner was). The .page-subtitle keeps its desktop copy. --------------------------------------------------------------------- */ @media (max-width: 640px) { /* ---- Subtitle: reveal under the topbar title; drop the redundant h1 ---- */ #page-parenteralnutrition > .page-header { display: block; } #page-parenteralnutrition > .page-header h1 { display: none; } #page-parenteralnutrition > .page-header .page-subtitle { display: block; margin: -2px 0 6px; font: 500 15px/1.4 var(--font-ui); color: var(--ink-muted); } /* ---- Card headers: sage round icon + reskinned heading (all sections, incl. the results rail) ---- */ #page-parenteralnutrition .card-header { align-items: center; gap: 12px; } #page-parenteralnutrition .card-header .icon-chip { width: 40px; height: 40px; flex: 0 0 40px; border-radius: var(--r-full); background: var(--primary-container); color: var(--primary); } #page-parenteralnutrition .card-header .icon-chip .icon { width: 21px; height: 21px; } #page-parenteralnutrition .card-header h2 { font: 700 18px/1.2 var(--font-ui); letter-spacing: -.01em; text-transform: none; color: var(--ink); } /* ---- Section sub-headings warmed (Delivery/Energy, dosing-ref headings, compatibility, balance) ---- */ #page-parenteralnutrition .card-subhead { font: 700 13px/1.3 var(--font-ui); text-transform: none; letter-spacing: 0; color: var(--ink); } #page-parenteralnutrition .section-heading-row h2, #page-parenteralnutrition .pn-compatibility-heading h2 { font: 700 17px/1.25 var(--font-ui); letter-spacing: -.01em; text-transform: none; color: var(--ink); } #page-parenteralnutrition .pn-reference-heading { font: 700 14px/1.3 var(--font-ui); text-transform: none; letter-spacing: 0; color: var(--ink); } #page-parenteralnutrition .pn-reference-heading .icon-chip { width: 34px; height: 34px; flex: 0 0 34px; border-radius: var(--r-full); background: var(--primary-container); color: var(--primary); } /* ---- Totals tiles (revealed via "View details"): flat cells over the desktop boxes ---- */ #page-parenteralnutrition .pn-tile-row { grid-template-columns: 1fr 1fr; gap: 8px; } #page-parenteralnutrition .pn-tile-row .stat { background: none; border: 0; box-shadow: none; padding: 0; text-align: left; } #page-parenteralnutrition .pn-tile-row .stat .num { font: 700 20px/1.1 var(--font-ui); color: var(--primary); font-variant-numeric: tabular-nums; } #page-parenteralnutrition .pn-tile-row .stat .lbl { font: 600 11px/1.2 var(--font-ui); color: var(--ink-muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 3px; } /* ---- Detail readout rows: subtle dividers, muted label / ink value ---- */ #page-parenteralnutrition .detail-line { border-top: 1px solid var(--border-subtle); padding: 9px 0; font: 500 13.5px/1.35 var(--font-ui); color: var(--ink); } #page-parenteralnutrition .detail-line > span:first-child { color: var(--ink-muted); } /* ---- ASPEN dosing reference tables: warmed type (they scroll horizontally) ---- */ #page-parenteralnutrition .ref-table th { font: 600 11px/1.25 var(--font-ui); color: var(--ink-muted); text-transform: none; letter-spacing: 0; } #page-parenteralnutrition .ref-table td { font: 500 13px/1.3 var(--font-ui); color: var(--ink); } #page-parenteralnutrition .ref-table td:first-child, #page-parenteralnutrition .ref-table th[scope="row"] { font-weight: 600; color: var(--ink); } /* ---- "PN summary" -- restyle the in-flow dock card into m19's nested sage output panel ---- */ #pnMobileResults.mobile-result-dock:not([hidden]) { background: var(--primary-tint); border: 1px solid var(--primary-container); box-shadow: none; border-radius: 16px; margin: 18px 0 0; padding: 14px; } #pnMobileResults .rc-head { margin-bottom: 12px; } #pnMobileResults .rc-title { font: 700 15px/1.2 var(--font-ui); color: var(--ink); } #pnMobileResults .rc-grid { gap: 10px 8px; } /* Icon circle (left) spanning both text rows; value over label (right) -- same shape as #girMobileResults. */ #pnMobileResults .rc-cell { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: 8px; row-gap: 1px; } #pnMobileResults .rc-cell::before { content: ""; grid-row: 1 / 3; grid-column: 1; width: 30px; height: 30px; border-radius: var(--r-full); background: var(--surface-card) var(--rc-ic) center / 17px 17px no-repeat; } #pnMobileResults .rc-val { grid-row: 1; grid-column: 2; font: 700 18px/1.15 var(--font-ui); } #pnMobileResults .rc-lbl { grid-row: 2; grid-column: 2; } /* Forest-stroke line glyphs: flame (kcal/kg) / IV drip (fluid rate) / droplet (GIR). */ #pnMobileResults .rc-cell:nth-child(1) { --rc-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F4A34' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c1 3 4 4.2 4 7.5a4 4 0 0 1-8 0c0-1.2.5-2.2 1-3 .2 1 .8 1.6 1.5 1.8C10.2 6.7 11 4.7 12 3z'/%3E%3C/svg%3E"); } #pnMobileResults .rc-cell:nth-child(2) { --rc-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F4A34' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5v6'/%3E%3Cpath d='M9.5 8.5h5a1 1 0 0 1 1 1v8a2.5 2.5 0 0 1-2.5 2.5h-2a2.5 2.5 0 0 1-2.5-2.5v-8a1 1 0 0 1 1-1z'/%3E%3Cpath d='M12 12v4'/%3E%3C/svg%3E"); } #pnMobileResults .rc-cell:nth-child(3) { --rc-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F4A34' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3s6 6.4 6 11a6 6 0 0 1-12 0c0-4.6 6-11 6-11z'/%3E%3C/svg%3E"); } #pnMobileResults .rc-details { color: var(--primary); font: 600 12.5px/1.2 var(--font-ui); } /* Factual macro-range banner (#pnInterp) reuses the shared .gir-interp styling; its body carries one line per substrate, so it needs multi-line wrapping. */ #pnInterpText { white-space: pre-line; } } /* --------------------------------------------------------------------- Wave 4b -- Goal Regimen Builder (mockup m15) reskin. Maintainer ruling posture (chylo m18 / continue reskin-existing + flag): RESKIN THE EXISTING FUNCTION only. m15 envisions a multi-objective OPTIMIZER the tool does not compute -- optimization toggles (Optimize for fluid / Protein priority / Allow higher concentration), editable constraints (max volume/concentration, min feeds, fluid method), a protein goal, and a ranked 3-"Suggested Regimens" list. The current builder derives ONE regimen (total volume + rate + a full readout) plus the existing alternatives toolbar. None of m15's optimizer surfaces are built here; this is a CSS-only pass warming the existing section to the card system, mirroring #page-gir / #page-chylo. Logged deviations (NOT built): the optimization toggles, the constraints chips, the protein goal, and the ranked Suggested-Regimens list. The .page-subtitle keeps its desktop copy; the detailed Regimen Readout is kept (it is the tool's real output, where m15 would show suggestions). --------------------------------------------------------------------- */ @media (max-width: 640px) { /* ---- Subtitle: reveal under the topbar title; drop the redundant h1 ---- */ #page-goalvolume > .page-header { display: block; } #page-goalvolume > .page-header h1 { display: none; } #page-goalvolume > .page-header .page-subtitle { display: block; margin: -2px 0 6px; font: 500 15px/1.4 var(--font-ui); color: var(--ink-muted); } /* ---- Card header: sage round icon + reskinned heading ---- */ #page-goalvolume .card-header { align-items: center; gap: 12px; } #page-goalvolume .card-header .icon-chip { width: 40px; height: 40px; flex: 0 0 40px; border-radius: var(--r-full); background: var(--primary-container); color: var(--primary); } #page-goalvolume .card-header .icon-chip .icon { width: 21px; height: 21px; } #page-goalvolume .card-header h2 { font: 700 18px/1.2 var(--font-ui); letter-spacing: -.01em; text-transform: none; color: var(--ink); } /* ---- The in-section Total-volume/Rate stat row duplicates the mobile result card headlines (gvTotalMlDay / gvRateValue), so hide it on phone -- the card is the sole phone summary (the card's observer still reads the hidden spans' textContent). ---- */ #page-goalvolume > section > .stat-row { display: none; } /* ---- Regimen Readout kept (real output) -- warm its heading ---- */ #page-goalvolume .readout-section .readout-header h2 { font: 700 15px/1.2 var(--font-ui); text-transform: none; letter-spacing: 0; color: var(--ink); } /* ---- "Regimen totals" -- restyle the dock card into m15's nested sage totals panel ---- */ #goalVolumeMobileResults.mobile-result-dock:not([hidden]) { background: var(--primary-tint); border: 1px solid var(--primary-container); box-shadow: none; border-radius: 16px; margin: 18px 0 0; padding: 14px; } #goalVolumeMobileResults .rc-head { margin-bottom: 12px; } #goalVolumeMobileResults .rc-title { font: 700 15px/1.2 var(--font-ui); color: var(--ink); } #goalVolumeMobileResults .rc-grid { gap: 10px 8px; } #goalVolumeMobileResults .rc-cell { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: 8px; row-gap: 1px; } #goalVolumeMobileResults .rc-cell::before { content: ""; grid-row: 1 / 3; grid-column: 1; width: 30px; height: 30px; border-radius: var(--r-full); background: var(--surface-card) var(--rc-ic) center / 17px 17px no-repeat; } #goalVolumeMobileResults .rc-val { grid-row: 1; grid-column: 2; font: 700 18px/1.15 var(--font-ui); } #goalVolumeMobileResults .rc-lbl { grid-row: 2; grid-column: 2; } /* Forest-stroke line glyphs: droplet (total volume) / IV drip (rate). */ #goalVolumeMobileResults .rc-cell:nth-child(1) { --rc-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F4A34' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3s6 6.4 6 11a6 6 0 0 1-12 0c0-4.6 6-11 6-11z'/%3E%3C/svg%3E"); } #goalVolumeMobileResults .rc-cell:nth-child(2) { --rc-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F4A34' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5v6'/%3E%3Cpath d='M9.5 8.5h5a1 1 0 0 1 1 1v8a2.5 2.5 0 0 1-2.5 2.5h-2a2.5 2.5 0 0 1-2.5-2.5v-8a1 1 0 0 1 1-1z'/%3E%3Cpath d='M12 12v4'/%3E%3C/svg%3E"); } } /* --------------------------------------------------------------------- Wave 4b -- Pediatric Tube Feeds (mockup m4) reskin. Reskin-existing-function pass (the tool already ships m4's Simple/Advanced toggle, feeding segments, modular serving-size entry, free water/flushes, nutritional totals, and mixing recipe -- so this is a genuine warming, not a restructure). CSS-only, mirrors #page-parenteralnutrition: the mobile result card is the phone summary (3 headline stats), the full totals/readout/mixing rail is revealed by "View details" and warmed there. Shared markup untouched; desktop unchanged. Logged deviations (m4 vs existing -- NOT built): m4's read-only row-picker input rows (label + value + chevron) are a structural input redesign; the editable selects/number fields are kept. The .page-subtitle keeps its desktop copy. --------------------------------------------------------------------- */ @media (max-width: 640px) { /* ---- Subtitle: reveal under the topbar title; drop the redundant h1 ---- */ #page-tubefeeds > .page-header { display: block; } #page-tubefeeds > .page-header h1 { display: none; } #page-tubefeeds > .page-header .page-subtitle { display: block; margin: -2px 0 6px; font: 500 15px/1.4 var(--font-ui); color: var(--ink-muted); } /* ---- Card headers: sage round icon + reskinned heading (all sections + the results rail) ---- */ #page-tubefeeds .card-header { align-items: center; gap: 12px; } #page-tubefeeds .card-header .icon-chip { width: 40px; height: 40px; flex: 0 0 40px; border-radius: var(--r-full); background: var(--primary-container); color: var(--primary); } #page-tubefeeds .card-header .icon-chip .icon { width: 21px; height: 21px; } #page-tubefeeds .card-header h2 { font: 700 18px/1.2 var(--font-ui); letter-spacing: -.01em; text-transform: none; color: var(--ink); } /* ---- Nutritional Totals (revealed via "View details"): flat 3-up cells over the desktop boxes ---- */ #page-tubefeeds .totals-card .stat-row { grid-template-columns: repeat(3, 1fr); gap: 8px; } #page-tubefeeds .totals-card .stat { background: none; border: 0; box-shadow: none; padding: 0; text-align: left; } #page-tubefeeds .totals-card .stat .num { font: 700 20px/1.1 var(--font-ui); color: var(--primary); font-variant-numeric: tabular-nums; } #page-tubefeeds .totals-card .stat .lbl { font: 600 11px/1.2 var(--font-ui); color: var(--ink-muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 3px; } /* ---- Detail readout rows: subtle dividers, muted label / ink value ---- */ #page-tubefeeds .detail-line { border-top: 1px solid var(--border-subtle); padding: 9px 0; font: 500 13.5px/1.35 var(--font-ui); color: var(--ink); } #page-tubefeeds .detail-line > span:first-child { color: var(--ink-muted); } /* ---- Readout + Mixing Recipe headings warmed (kept -- they are the tool's real detailed output) ---- */ #page-tubefeeds .readout-section .readout-header h2, #page-tubefeeds .tube-mixing-recipe .tube-mixing-recipe-header h2 { font: 700 15px/1.2 var(--font-ui); text-transform: none; letter-spacing: 0; color: var(--ink); } /* ---- "Nutritional totals" -- restyle the dock card into m4's nested sage totals panel ---- */ #tubeFeedsMobileResults.mobile-result-dock:not([hidden]) { background: var(--primary-tint); border: 1px solid var(--primary-container); box-shadow: none; border-radius: 16px; margin: 18px 0 0; padding: 14px; } #tubeFeedsMobileResults .rc-head { margin-bottom: 12px; } #tubeFeedsMobileResults .rc-title { font: 700 15px/1.2 var(--font-ui); color: var(--ink); } #tubeFeedsMobileResults .rc-grid { gap: 10px 8px; } #tubeFeedsMobileResults .rc-cell { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: 8px; row-gap: 1px; } #tubeFeedsMobileResults .rc-cell::before { content: ""; grid-row: 1 / 3; grid-column: 1; width: 30px; height: 30px; border-radius: var(--r-full); background: var(--surface-card) var(--rc-ic) center / 17px 17px no-repeat; } #tubeFeedsMobileResults .rc-val { grid-row: 1; grid-column: 2; font: 700 18px/1.15 var(--font-ui); } #tubeFeedsMobileResults .rc-lbl { grid-row: 2; grid-column: 2; } /* Forest-stroke line glyphs: flame (kcal/kg) / leaf (protein/kg) / droplet (mL/kg). */ #tubeFeedsMobileResults .rc-cell:nth-child(1) { --rc-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F4A34' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c1 3 4 4.2 4 7.5a4 4 0 0 1-8 0c0-1.2.5-2.2 1-3 .2 1 .8 1.6 1.5 1.8C10.2 6.7 11 4.7 12 3z'/%3E%3C/svg%3E"); } #tubeFeedsMobileResults .rc-cell:nth-child(2) { --rc-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F4A34' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4C7 4 4 8 4 12c0 4 3 8 8 8 0-4 0-8-3-11'/%3E%3Cpath d='M12 20c0-5 2-9 6-11'/%3E%3C/svg%3E"); } #tubeFeedsMobileResults .rc-cell:nth-child(3) { --rc-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F4A34' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3s6 6.4 6 11a6 6 0 0 1-12 0c0-4.6 6-11 6-11z'/%3E%3C/svg%3E"); } #tubeFeedsMobileResults .rc-details { color: var(--primary); font: 600 12.5px/1.2 var(--font-ui); } } /* --------------------------------------------------------------------- Wave 4b -- Infant Feeds (mockup m3, page id #page-regimen) reskin. Same reskin-existing-function pass as Tube Feeds (identical Formula/EBM + Modulars + Nutritional Totals + Regimen Readout structure and the same 3-headline result card). CSS-only, mirrors #page-tubefeeds. Shared markup untouched; desktop unchanged. Logged deviation (NOT built): m3's read-only row-picker input rows (label + value + chevron) are a structural input redesign; the editable selects/number fields are kept. The .page-subtitle keeps its desktop copy. --------------------------------------------------------------------- */ @media (max-width: 640px) { /* ---- Subtitle: reveal under the topbar title; drop the redundant h1 ---- */ #page-regimen > .page-header { display: block; } #page-regimen > .page-header h1 { display: none; } #page-regimen > .page-header .page-subtitle { display: block; margin: -2px 0 6px; font: 500 15px/1.4 var(--font-ui); color: var(--ink-muted); } /* ---- Card headers: sage round icon + reskinned heading (all sections + the results rail) ---- */ #page-regimen .card-header { align-items: center; gap: 12px; } #page-regimen .card-header .icon-chip { width: 40px; height: 40px; flex: 0 0 40px; border-radius: var(--r-full); background: var(--primary-container); color: var(--primary); } #page-regimen .card-header .icon-chip .icon { width: 21px; height: 21px; } #page-regimen .card-header h2 { font: 700 18px/1.2 var(--font-ui); letter-spacing: -.01em; text-transform: none; color: var(--ink); } /* ---- Nutritional Totals (revealed via "View details"): flat 3-up cells over the desktop boxes ---- */ #page-regimen .totals-card .stat-row { grid-template-columns: repeat(3, 1fr); gap: 8px; } #page-regimen .totals-card .stat { background: none; border: 0; box-shadow: none; padding: 0; text-align: left; } #page-regimen .totals-card .stat .num { font: 700 20px/1.1 var(--font-ui); color: var(--primary); font-variant-numeric: tabular-nums; } #page-regimen .totals-card .stat .lbl { font: 600 11px/1.2 var(--font-ui); color: var(--ink-muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 3px; } /* ---- Detail readout rows: subtle dividers, muted label / ink value ---- */ #page-regimen .detail-line { border-top: 1px solid var(--border-subtle); padding: 9px 0; font: 500 13.5px/1.35 var(--font-ui); color: var(--ink); } #page-regimen .detail-line > span:first-child { color: var(--ink-muted); } /* ---- Regimen Readout heading warmed (kept -- the tool's real detailed output) ---- */ #page-regimen .readout-section .readout-header h2 { font: 700 15px/1.2 var(--font-ui); text-transform: none; letter-spacing: 0; color: var(--ink); } /* ---- "Nutritional totals" -- restyle the dock card into m3's nested sage totals panel ---- */ #regimenMobileResults.mobile-result-dock:not([hidden]) { background: var(--primary-tint); border: 1px solid var(--primary-container); box-shadow: none; border-radius: 16px; margin: 18px 0 0; padding: 14px; } #regimenMobileResults .rc-head { margin-bottom: 12px; } #regimenMobileResults .rc-title { font: 700 15px/1.2 var(--font-ui); color: var(--ink); } #regimenMobileResults .rc-grid { gap: 10px 8px; } #regimenMobileResults .rc-cell { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: 8px; row-gap: 1px; } #regimenMobileResults .rc-cell::before { content: ""; grid-row: 1 / 3; grid-column: 1; width: 30px; height: 30px; border-radius: var(--r-full); background: var(--surface-card) var(--rc-ic) center / 17px 17px no-repeat; } #regimenMobileResults .rc-val { grid-row: 1; grid-column: 2; font: 700 18px/1.15 var(--font-ui); } #regimenMobileResults .rc-lbl { grid-row: 2; grid-column: 2; } /* Forest-stroke line glyphs: flame (kcal/kg) / leaf (protein/kg) / droplet (mL/kg). */ #regimenMobileResults .rc-cell:nth-child(1) { --rc-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F4A34' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c1 3 4 4.2 4 7.5a4 4 0 0 1-8 0c0-1.2.5-2.2 1-3 .2 1 .8 1.6 1.5 1.8C10.2 6.7 11 4.7 12 3z'/%3E%3C/svg%3E"); } #regimenMobileResults .rc-cell:nth-child(2) { --rc-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F4A34' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4C7 4 4 8 4 12c0 4 3 8 8 8 0-4 0-8-3-11'/%3E%3Cpath d='M12 20c0-5 2-9 6-11'/%3E%3C/svg%3E"); } #regimenMobileResults .rc-cell:nth-child(3) { --rc-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F4A34' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3s6 6.4 6 11a6 6 0 0 1-12 0c0-4.6 6-11 6-11z'/%3E%3C/svg%3E"); } #regimenMobileResults .rc-details { color: var(--primary); font: 600 12.5px/1.2 var(--font-ui); } } /* --------------------------------------------------------------------- Wave 4b -- Estimated Needs (mockups m6 Energy / m22 Fluids / m23 Catch-Up / m24 Critically Ill / m38 Adj. Body Wt.) reskin. Reskin-existing-function pass across the five stacked sections (all share .estimated-needs-card / .card-header / .stat-row .stat / .detail-line / .card-subhead / .ref-table), navigated by the in-page tab row. This page has no result dock -- it computes inline -- so the warming is card headers, the tab pills, centered flat stat cells, and dividered detail rows. CSS-only; shared markup untouched; desktop unchanged. Logged deviations (NOT built): m6's separate sage "Estimated Needs Summary" card (Adjusted Energy / Protein / kcal-kg) is a restructure -- the adjusted-energy value already shows in the Energy card's activity block, so no new summary card is added; m6's large body-serif page title is not adopted (calc sub-pages keep the topbar "< Estimated Needs" back row per the Wave 4b header ruling); the read-only Group/Age row-pickers are a structural input redesign (editable selects kept). The .page-subtitle keeps its desktop copy. --------------------------------------------------------------------- */ @media (max-width: 640px) { /* ---- Subtitle: reveal under the topbar title; drop the redundant h1 ---- */ #page-estimatedneeds > .page-header { display: block; } #page-estimatedneeds > .page-header h1 { display: none; } #page-estimatedneeds > .page-header .page-subtitle { display: block; margin: -2px 0 6px; font: 500 15px/1.4 var(--font-ui); color: var(--ink-muted); } /* ---- In-page tabs: deepen the active pill to forest (m6) ---- */ #page-estimatedneeds .inpage-tabs button[aria-current="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); } /* ---- Card headers: sage round icon + reskinned heading (all five sections) ---- */ #page-estimatedneeds .card-header { align-items: center; gap: 12px; } #page-estimatedneeds .card-header .icon-chip { width: 40px; height: 40px; flex: 0 0 40px; border-radius: var(--r-full); background: var(--primary-container); color: var(--primary); } #page-estimatedneeds .card-header .icon-chip .icon { width: 21px; height: 21px; } #page-estimatedneeds .card-header h2 { font: 700 18px/1.2 var(--font-ui); letter-spacing: -.01em; text-transform: none; color: var(--ink); } #page-estimatedneeds .card-subhead { font: 700 13px/1.3 var(--font-ui); text-transform: none; letter-spacing: 0; color: var(--ink); } /* ---- Stat cells: flat, centered, with slim dividers (m6 "DRI / BMR / Protein" row) ---- */ #page-estimatedneeds .stat-row .stat { background: none; border: 0; box-shadow: none; padding: 0 6px; text-align: center; } #page-estimatedneeds .stat-row .stat + .stat { border-left: 1px solid var(--border-subtle); } #page-estimatedneeds .stat-row .stat .num { font: 700 22px/1.1 var(--font-ui); color: var(--primary); font-variant-numeric: tabular-nums; } #page-estimatedneeds .stat-row .stat .lbl { font: 600 11px/1.25 var(--font-ui); color: var(--ink-muted); margin-top: 4px; } /* ---- Detail readout rows: subtle dividers, muted label / ink value ---- */ #page-estimatedneeds .detail-line { border-top: 1px solid var(--border-subtle); padding: 9px 0; font: 500 13.5px/1.35 var(--font-ui); color: var(--ink); } #page-estimatedneeds .detail-line > span:first-child { color: var(--ink-muted); } /* ---- Reference tables (Holliday-Segar tiers) warmed ---- */ #page-estimatedneeds .ref-table th { font: 600 11px/1.25 var(--font-ui); color: var(--ink-muted); text-transform: none; letter-spacing: 0; } #page-estimatedneeds .ref-table td { font: 500 13px/1.3 var(--font-ui); color: var(--ink); } #page-estimatedneeds .ref-table td:first-child { font-weight: 600; } /* ---- Readout heading warmed (Energy section) ---- */ #page-estimatedneeds .readout-section .readout-header h3 { font: 700 14px/1.2 var(--font-ui); text-transform: none; letter-spacing: 0; color: var(--ink); } } /* --------------------------------------------------------------------- Wave 4c -- Energy & Protein Requirements (mockup m37) reskin. Pure reference page (no computed output): eight stacked sections sharing .card-header / .section-intro / .ref-table / .source-card / .card-subhead / .factor-list / .catchup-formula-panel. Warming pass only -- sage round card icons, reskinned headings, warmed reference tables and factor lists. CSS-only; shared markup untouched; desktop unchanged. Logged deviations (NOT built): m37's in-page tab nav (Age / Developmental Disabilities / Cerebral Palsy / Equations) is a new navigation surface -- the stacked reference sections are kept; m37's Cerebral Palsy chip-factor blocks (Hypotonic 0.8 / Normal 1.0 / Hypertonic 1.1-1.3; Sedentary 1.2 / Moderate 1.4 / Active 1.6) restate the source's muscle-tone/activity factors with DIFFERENT numeric values than the printed TCH guide the .factor-list transcribes -- the sourced factor list is kept verbatim, not swapped for the mockup's chips; m37's "Equations at a Glance" row-picker (label + one-line summary + chevron) is a structural redesign -- the full published Schofield/WHO equation tables are kept; m37's large body-serif page title is not adopted (calc sub-pages keep the topbar "< Energy & Protein Requirements" back row per the Wave 4b header ruling). The .page-subtitle keeps its desktop copy. --------------------------------------------------------------------- */ @media (max-width: 640px) { /* ---- Subtitle: reveal under the topbar title; drop the redundant h1 ---- */ #page-energyprotein > .page-header { display: block; } #page-energyprotein > .page-header h1 { display: none; } #page-energyprotein > .page-header .page-subtitle { display: block; margin: -2px 0 6px; font: 500 15px/1.4 var(--font-ui); color: var(--ink-muted); } /* ---- Card headers: sage round icon + reskinned heading (all icon-chip variants normalized) ---- */ #page-energyprotein .card-header { align-items: center; gap: 12px; } #page-energyprotein .card-header .icon-chip { width: 40px; height: 40px; flex: 0 0 40px; border-radius: var(--r-full); background: var(--primary-container); color: var(--primary); } #page-energyprotein .card-header .icon-chip .icon { width: 21px; height: 21px; } #page-energyprotein .card-header h2 { font: 700 18px/1.2 var(--font-ui); letter-spacing: -.01em; text-transform: none; color: var(--ink); } #page-energyprotein .card-subhead { font: 700 13px/1.3 var(--font-ui); text-transform: none; letter-spacing: 0; color: var(--ink); } /* ---- Reference tables warmed (Energy-by-Age, Schofield, WHO, activity/stress) ---- */ #page-energyprotein .ref-table th { font: 600 11px/1.25 var(--font-ui); color: var(--ink-muted); text-transform: none; letter-spacing: 0; } #page-energyprotein .ref-table td { font: 500 13px/1.3 var(--font-ui); color: var(--ink); } #page-energyprotein .ref-table td:first-child { font-weight: 600; } /* ---- Factor lists (Cerebral Palsy tone / activity / growth) warmed ---- */ #page-energyprotein .factor-list { font: 500 13.5px/1.4 var(--font-ui); color: var(--ink); } /* ---- Cerebral Palsy equation panel warmed ---- */ #page-energyprotein .catchup-formula-panel { background: var(--primary-tint); border: 1px solid var(--border-subtle); border-radius: var(--r-card); color: var(--ink); } } /* --------------------------------------------------------------------- Wave 4c -- Refeeding Syndrome (mockup m36) reskin. Static reference page (no inputs, no calculation): one section holding a JS-rendered dense risk-tier criteria table (.ref-table.refeed-criteria-table, Criterion x Mild/Moderate/Significant), grouped monitoring checklists (.card-subhead headings +