/* ==========================================================================
   Wave 3 page conversions
   ========================================================================== */

/* Wave 7 cleanup utilities for former presentational inline styles */
.u-mt-0 { margin-top: 0; }
.u-mt-4 { margin-top: 4px; }
.u-mt-8 { margin-top: 8px; }
.u-mt-12 { margin-top: 12px; }
.u-mt-16 { margin-top: 16px; }
.u-mt-20 { margin-top: 20px; }
.u-m-0 { margin: 0; }
.u-mb-12 { margin-bottom: 12px; }
.u-text-left { text-align: left; }
.u-text-11 { font-size: 11px; }
.u-grid-one { grid-template-columns: 1fr; }
.u-grid-span-3 { grid-column: span 3; }
.u-overflow-x-auto { overflow-x: auto; }
.u-flex-1 { flex: 1; }
.u-flex-2 { flex: 2; }
.u-p-8-12 { padding: 8px 12px; }

/* 04-screens Layout archetype A — calculator rails */
.calc-layout { align-items: start; display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr) 360px; }
.calc-inputs,
.results-rail { display: grid; gap: 24px; min-width: 0; }
.calc-inputs > section,
.results-rail > section { margin: 0; max-width: none; }
.results-rail { position: sticky; top: 136px; }
.totals-card { background: var(--primary-tint); border-color: var(--primary-container); }
.totals-card .stat-row { grid-template-columns: 1fr; }
.totals-card .stat { align-items: center; background: var(--surface-card); display: flex; justify-content: space-between; text-align: left; }
.totals-card .stat .num { order: 2; text-align: right; }
.totals-card .stat .lbl { order: 1; }
.results-rail .readout-section { margin: 0; }
.recipe-density-card .num { font-size: 32px; }
.recipe-density-source { color: var(--ink-muted); margin-top: 2px; }
.calc-layout-wide { grid-template-columns: minmax(0, 1fr) 400px; }
.growth-results-rail .gp-results { display: grid; gap: 12px; grid-template-columns: 1fr; margin: 0; }
.growth-results-rail .gp-card { margin: 0; }

/* redesign2 post-audit: the .gp-card family was styled only inside @layer legacy,
   so the rail kept its pre-redesign flat tint. The accent keys the metric, never
   a normal/abnormal reading — this app states no thresholds (02-gap-analysis §4). */
.gp-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--gp-accent, var(--primary));
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: 14px 16px;
}
.gp-results .gp-card:nth-child(1) { --gp-accent: var(--primary); }
.gp-results .gp-card:nth-child(2) { --gp-accent: var(--accent-blue); }
.gp-results .gp-card:nth-child(3) { --gp-accent: var(--on-tertiary-container); }
.gp-results .gp-card:nth-child(4) { --gp-accent: var(--secondary); }
.gp-results .gp-card:nth-child(5) { --gp-accent: var(--on-primary-container); }
.gp-card .meter > span { background: var(--gp-accent, var(--primary)); }
.gp-card-title {
  border-bottom: 0;
  color: var(--ink);
  font: 700 11px/16px var(--font-ui);
  letter-spacing: 0.05em;
  margin-bottom: 8px;
  padding-bottom: 0;
  text-transform: uppercase;
}
.gp-card-row { font: 400 13px/20px var(--font-ui); }
.gp-card-row span:last-child { font-family: var(--font-mono); font-size: 13px; }
.renal-recipe-readout-card { padding: 0; }
.renal-status-card:has(> #renalBlendStatus:empty):has(> #renalBlendIssues:empty) { display: none; }
.pn-results-rail .pn-output-grid { display: grid; gap: 16px; grid-template-columns: 1fr; margin: 0; }
.pn-results-rail .pn-output-group { min-width: 0; }
.totals-card .pn-tile-row { grid-template-columns: 1fr 1fr; margin-bottom: 16px; }

/* redesign2 post-audit: PN worksheet granular entries */
.pn-additive-rows { gap: 10px; }
.pn-additive-row {
  background: var(--surface-low);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: 12px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.pn-additive-row:focus-within { border-color: var(--accent-blue); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-blue) 25%, transparent); }
.pn-cysteine-entry {
  background: var(--surface-low);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
}
#pnCysteineGuidanceDialog { border-radius: var(--r-lg); }
.pn-balance-grid > div { background: var(--surface-low); border-radius: var(--r-lg); }
.pn-balance-grid h3 { color: var(--ink-muted); font: 700 11px/16px var(--font-ui); letter-spacing: 0.05em; text-transform: uppercase; }
.pn-compatibility-chart-wrap { background: var(--surface-low); border-radius: var(--r-lg); }
.pn-compatibility-result { border-radius: var(--r-md); }
.status-chip { border-radius: var(--r-full); }

@media (max-width: 1100px) {
  .calc-layout { grid-template-columns: 1fr; }
  .results-rail { position: static; }
}

/* 04-screens §2 All tools */
#page-alltools > section { max-width: none; }
.all-tools-toolbar { align-items: end; display: grid; gap: 12px 16px; grid-template-columns: minmax(0, 1fr) auto; margin-bottom: 16px; max-width: none; }
.all-tools-toolbar > label { grid-column: 1 / -1; margin-bottom: -8px; }
.all-tools-actions { margin: 0; }
.all-tools-list {
  display: grid;
  gap: 16px;
  grid-auto-flow: row dense;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.all-tools-empty { color: var(--ink-muted); margin: 16px 0 0; padding: 32px; text-align: center; }
#page-alltools .tool-launch-card { align-items: flex-start; flex-direction: column; gap: 10px; padding: 14px 40px 14px 14px; }
#page-alltools .tool-launch-icon { border-radius: var(--r-md); flex-basis: 36px; height: 36px; width: 36px; }

@media (max-width: 1100px) {
  .all-tools-list { grid-template-columns: 1fr; }
  .tool-section { grid-column: 1 / -1; }
  .tool-tile-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

/* 04-screens §§5, 10, 12 Calculator B pages */
#page-goalvolume > section,
#page-cga > section,
#page-gir > section { max-width: 880px; }
.component-stack { display: grid; gap: 16px; }

/* 04-screens §11 Chylothorax */
#page-chylo > section { max-width: 880px; }

/* 04-screens §14 Unit converter */
#page-unitconverter { max-width: 1040px; }
.converter-grid { display: grid; gap: 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.converter-grid > section { margin: 0; }
.converter-intro { grid-column: 1 / -1; }

/* redesign2 §11 Reference hub */
#page-referencehub > section { max-width: none; }
.reference-hub-section { display: grid; gap: 16px; }

/* 04-screens §19 Settings */
#page-settings > section { max-width: 760px; }
.settings-card { background: transparent; border: 0; max-width: none; padding: 0; }
.shortcut-list { background: var(--surface-low); border-radius: var(--r-lg); display: grid; gap: 1px; margin: 16px 0; padding: 8px; }
.shortcut-row { align-items: center; border: 0; border-radius: var(--r-md); display: flex; gap: 16px; justify-content: space-between; min-height: 48px; padding: 8px 12px; }
.shortcut-row + .shortcut-row { border-top: 1px solid var(--border-subtle); }
.shortcut-row-recording { background: var(--surface-card); }
.shortcut-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.shortcut-info strong { color: var(--ink); font: 600 14px/20px var(--font-ui); }
.shortcut-info span { color: var(--ink-muted); font: 400 12px/16px var(--font-ui); }
.shortcut-controls { align-items: center; display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.shortcut-fixed { white-space: nowrap; }
.shortcut-clear[hidden] { display: none; }
.settings-status { color: var(--success); font: 400 12px/16px var(--font-ui); min-height: 16px; }
.settings-divider { height: 1px; margin: 20px 0; background: var(--border-subtle); }
.btn-danger-subtle { color: var(--danger); border-color: var(--danger); }
.btn-danger-subtle:hover { background: var(--danger-bg); }

@media (max-width: 860px) {
  .converter-grid { grid-template-columns: 1fr; }
  .converter-intro { grid-column: auto; }
}

@media (max-width: 640px) {
  .all-tools-toolbar { align-items: stretch; grid-template-columns: 1fr; }
  .all-tools-toolbar > label { grid-column: auto; }
  .all-tools-actions { justify-content: flex-start; }
  .shortcut-row { align-items: flex-start; flex-direction: column; }
  .shortcut-controls { justify-content: flex-start; width: 100%; }
}

/* 04-screens §1 Dashboard */
#page-dashboard > section { max-width: none; }
.dashboard-heading-title { align-items: center; display: flex; gap: 12px; min-width: 0; }
.dashboard-section-heading { border-bottom: 1px solid var(--border-subtle); margin-bottom: 20px; padding-bottom: 12px; }
.dashboard-section-heading h2 { color: var(--ink); font: 600 16px/24px var(--font-ui); margin: 0; }
.dashboard-heading-actions { margin-left: auto; }
.dash-cards { gap: 24px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.dash-cards-pinned { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.dash-card { background: var(--surface-card); border-color: var(--border-subtle); border-radius: var(--r-lg); box-shadow: var(--shadow-card); min-height: 0; padding: 20px; transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease; }
.dash-card:hover { border-color: var(--primary); box-shadow: var(--shadow-raised); transform: translateY(-2px); }
.dash-card:active { transform: scale(0.98); }
.dash-card:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }
.dash-card .dash-icon { background-color: var(--surface-low); border-radius: var(--r-md); height: 40px; margin-bottom: 16px; width: 40px; }
.dash-card .dash-title { color: var(--ink); font: 600 16px/24px var(--font-ui); }
.dash-card .dash-desc { color: var(--ink-muted); font: 400 12px/18px var(--font-ui); }
.tool-card .dash-card-launch { padding: 6px 0 0; }
.tool-card-header { padding: 0; }

/* redesign2 post-audit: icon chip category tinting, rotated by card position so
   Pinned/Recent dashboard cards read the same colors as the Calculators hub. */
.dash-cards-pinned .tool-card:nth-child(3n+1) .dash-icon { background-color: var(--primary-container); color: var(--on-primary-container); }
.dash-cards-pinned .tool-card:nth-child(3n+2) .dash-icon { background-color: var(--info-bg); color: var(--info); }
.dash-cards-pinned .tool-card:nth-child(3n+3) .dash-icon { background-color: var(--warning-bg); color: var(--warning); }
.dashboard-workspace-grid {
  background: transparent;
  border: 0;
  box-shadow: none;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0;
}
.dashboard-workspace-grid:not(:has(> :not([hidden]))) {
  display: none;
}
.growth-trend-chart-compact {
  margin-top: 0;
  min-height: 200px;
}
.growth-trend-chart-compact svg {
  min-width: 520px;
}

@media (max-width: 640px) {
  .dashboard-workspace-grid { grid-template-columns: 1fr; }
  .workspace-card-header { align-items: flex-start; flex-direction: column; }
  .workspace-card-header .field { margin-left: 0; width: 100%; }
}

/* Dashboard search hero */
.dash-search-hero {
  margin-bottom: 28px;
}
.dash-search-trigger {
  align-items: center;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  color: var(--ink-muted);
  cursor: text;
  display: flex;
  font: 400 14.5px/1 var(--font-ui);
  gap: 10px;
  padding: 12px 16px;
  text-align: left;
  transition: border-color 150ms ease, box-shadow 150ms ease;
  width: 100%;
}
.dash-search-trigger:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-raised);
}
.dash-search-trigger:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}
.dash-search-trigger .icon {
  color: var(--ink-muted);
  flex-shrink: 0;
  height: 18px;
  width: 18px;
}
.dash-search-placeholder {
  flex: 1;
}
.dash-search-kbd {
  background: var(--surface-low);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
  color: var(--ink-muted);
  font: 600 11.5px/1 var(--font-ui);
  padding: 3px 6px;
  white-space: nowrap;
}

/* Workspace section no-workspace placeholder */
.dash-no-workspace {
  align-items: center;
  background: var(--surface-low);
  border: 1px dashed var(--border-subtle);
  border-radius: var(--r-lg);
  color: var(--ink-muted);
  display: flex;
  font: 400 12px/1.5 var(--font-ui);
  gap: 16px;
  justify-content: space-between;
  padding: 16px 20px;
}
.dash-no-workspace[hidden] { display: none; }
.dash-no-workspace p { margin: 0; }

/* What's New update list */
.dash-update-list {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.dash-update-list li {
  align-items: baseline;
  display: flex;
  gap: 12px;
}
.dash-update-date {
  color: var(--ink-muted);
  flex-shrink: 0;
  font: 400 11.5px/1.5 var(--font-ui);
  text-transform: uppercase;
  width: 56px;
}
.dash-update-text {
  color: var(--ink);
  font: 400 13.5px/1.5 var(--font-ui);
}
.dash-update-text strong { font-weight: 600; }

/* Onboarding card (first-time users) */
.dash-onboarding[hidden] { display: none; }
.dash-onboarding {
  margin-bottom: 24px;
}
.dash-onboarding-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: 32px;
  text-align: center;
}
.dash-onboarding-card h2 {
  color: var(--ink);
  font: 700 21px/28px var(--font-ui);
  letter-spacing: normal;
  margin: 0 0 8px;
  text-transform: none;
}
.dash-onboarding-card p {
  color: var(--ink-muted);
  font: 400 14.5px/1.6 var(--font-ui);
  margin: 0 0 24px;
}
.dash-onboarding-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

@media (max-width: 640px) {
  .dash-search-kbd { display: none; }
  .dash-no-workspace { flex-direction: column; align-items: flex-start; gap: 12px; }
  .dash-onboarding-card { padding: 24px 16px; }
  .dash-onboarding-actions { flex-direction: column; }
  .dash-onboarding-actions .btn { width: 100%; }
}

/* 04-screens §15 Formula Library */
#page-reference > section,
#page-reference > #libraryBrowseView > section,
#page-reference > .library-compare-view > section { max-width: none; }
.lib-mode-tabs { margin-bottom: 16px; }
.lib-tabs > .lib-tab { border-bottom: 0; }
.lib-single-grid { grid-template-columns: minmax(0, 1fr); margin-bottom: 8px; }
.filter-row { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 240px)); margin-top: 12px; }
.lib-product-picker-grid { margin-top: 8px; }
.lib-basis-note,
.lib-compare-status,
.lib-compare-footnote,
.lib-library-footnote { margin: 12px 0 0; text-align: left; }
.lib-compare-table-wrap { margin-top: 16px; }
.lib-product-list { display: grid; gap: 8px; }
.lib-product-row { align-items: center; background: var(--surface-card); border-color: var(--border-subtle); border-radius: var(--r-md); gap: 12px; min-height: 56px; padding: 12px 16px; transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease; }
.lib-product-row:hover { background: var(--surface-low); border-color: var(--primary); box-shadow: var(--shadow-raised); transform: translateY(-2px); }
.lib-product-row:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }
.lib-product-row-copy { display: grid; gap: 2px; min-width: 0; }
.lib-product-row .lib-product-name { color: var(--ink); font: 600 14px/20px var(--font-ui); }
.lib-product-row .lib-product-meta { color: var(--ink-muted); font: 400 12px/16px var(--font-ui); }
.lib-product-confidence { margin-left: auto; }
.lib-product-chevron { color: var(--primary); font: 600 24px/20px var(--font-ui); margin-left: auto; }
.lib-product-detail-btn { align-items: center; background: transparent; border: 0; border-radius: var(--r-sm); color: var(--primary); cursor: pointer; display: inline-flex; font: 600 24px/20px var(--font-ui); height: 32px; justify-content: center; margin-left: auto; padding: 0; width: 32px; }
.lib-product-detail-btn:hover { background: var(--primary-tint); }
.product-card-footer > .lib-product-chevron { display: none; }
/* minmax(0,…) rather than px floors: a 180px+360px floor plus the max-content footer
   demands ~710px, which the content column is not once the sidebar takes its ~170px —
   the card overflowed its list between the 640px stacking point and ~900px. */
.product-card { align-items: stretch; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr) auto; text-align: left; width: 100%; }
.product-stats { display: grid; gap: 8px 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); min-width: 0; }
/* Plain typographic columns rather than four boxed tiles: the row already sits
   inside the product card, so a second frame per stat only adds noise. */
.product-stat { display: grid; gap: 2px; padding: 2px 0; }
/* Type comes from the .label-caps / .data-mono utilities (§4) — these only add what
   the utilities do not carry. Hand-rolled fonts here drifted off the type ramp. */
.product-stat-label { color: var(--ink-muted); }
.product-stat-value { color: var(--ink); overflow-wrap: anywhere; }
.product-card-footer { align-items: center; display: flex; gap: 8px; justify-content: flex-end; min-width: max-content; }
.lib-add-compare { position: relative; z-index: 1; }
.library-detail-view { margin-top: 16px; }
.lib-back-button { margin-bottom: 16px; }
.lib-detail-layout { align-items: start; display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr) minmax(240px, 320px); }
.lib-detail-main { min-width: 0; }
.lib-detail-rail { display: grid; gap: 16px; min-width: 0; position: sticky; top: 16px; }
.lib-glance-card { padding: 20px; }
.lib-glance-title { color: var(--ink); font: 700 18px/24px var(--font-ui); margin-bottom: 12px; }
.lib-detail-table-wrap { margin-top: 8px; }
.lib-detail-table th { color: var(--ink-muted); font-weight: 500; text-align: left; width: 44%; }
.lib-detail-table td { overflow-wrap: anywhere; }
.lib-detail-table td .chip-success,
.lib-detail-table td .chip-warning,
.lib-detail-table td .chip-outline { vertical-align: middle; }
.lib-detail-header { margin-bottom: 16px; }
.lib-detail-title-row { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; }
.lib-detail-title { color: var(--ink); font: 600 20px/28px var(--font-ui); }
.lib-key-stats { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 0 0 16px; }
.lib-key-stat { background: var(--surface-low); border-radius: var(--r-md); display: grid; gap: 2px; padding: 16px; }
.lib-key-stat-value { color: var(--ink); font: 600 16px/24px var(--font-mono); font-variant-numeric: tabular-nums; }
.lib-key-stat-label { color: var(--ink-muted); font: 700 11px/16px var(--font-ui); letter-spacing: 0.05em; text-transform: uppercase; }
.lib-section { border-color: var(--border-subtle); border-radius: var(--r-lg); margin-bottom: 12px; }
.lib-section summary { align-items: center; background: var(--surface-card); color: var(--ink); display: flex; font: 700 11px/16px var(--font-ui); letter-spacing: 0.05em; padding: 16px; text-transform: uppercase; }
.lib-section summary::before { content: none; }
.lib-section summary::after { color: var(--ink-muted); content: "⌄"; font: 600 18px/16px var(--font-ui); margin-left: auto; transition: transform 150ms ease; }
.lib-section[open] summary::after { transform: rotate(180deg); }
.lib-section summary:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: -2px; }
.lib-section-body { border-top: 1px solid var(--border-subtle); padding: 4px 16px 14px; }
#page-reference .tr-section > td { background: var(--surface-low); color: var(--primary); font: 700 11px/16px var(--font-ui); letter-spacing: 0.05em; padding: 8px 16px; text-align: left; text-transform: uppercase; }
#libCompareTable th:first-child,
#libCompareTable td:first-child { background: var(--surface-card); left: 0; position: sticky; z-index: 1; }
#libCompareTable thead th:first-child { background: var(--surface-low); z-index: 3; }
#libCompareTable .tr-section td { position: static; }

/* 04-screens §16 Micronutrient Tables */
.micronutrient-reference > .card-header { margin-bottom: 12px; }
.micronutrient-panel { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); margin-top: 16px; padding: 0; }
.micronutrient-panel summary { align-items: center; background: var(--surface-low); color: var(--ink); display: flex; font: 700 11px/16px var(--font-ui); gap: 10px; letter-spacing: 0.05em; list-style: none; padding: 16px; text-transform: uppercase; }
.micronutrient-panel summary .icon-chip { flex: 0 0 24px; height: 24px; }
.micronutrient-panel summary .icon-chip .icon { height: 14px; width: 14px; }
.micronutrient-panel summary::-webkit-details-marker { display: none; }
.micronutrient-panel summary::after { color: var(--ink-muted); content: "⌄"; font: 600 18px/16px var(--font-ui); margin-left: auto; transition: transform 150ms ease; }
.micronutrient-panel[open] summary::after { transform: rotate(180deg); }
.micronutrient-panel summary:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: -2px; }
.micronutrient-panel .card-subhead { margin: 20px 16px 8px; }
.micronutrient-scroll { border: 0; border-radius: 0; margin: 0 16px 16px; }
.micronutrient-slider { accent-color: var(--primary); }
.micronutrient-table .micronutrient-group-row th,
.micronutrient-table .tr-section th { background: var(--surface-low); color: var(--primary); }
.micronutrient-table tbody th[scope="row"],
.micronutrient-table thead th:first-child { background: var(--surface-card); }
.micronutrient-table thead th:first-child { background: var(--surface-low); }
.micronutrient-scroll { max-height: 65vh; overflow-y: auto; }
.micronutrient-table thead th { z-index: 2; }
.micronutrient-table thead th:first-child { z-index: 3; }
.micronutrient-table tbody th { top: auto; }

/* 04-screens §17 Estimated Needs */
#page-estimatedneeds > section { max-width: none; }
.inpage-tabs { background: var(--bg); display: flex; gap: 8px; margin-bottom: 16px; overflow-x: auto; padding: 8px 0; position: sticky; top: 0; z-index: 5; }
.inpage-tabs button { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--r-full); color: var(--ink-muted); cursor: pointer; flex-shrink: 0; font: 700 12px/16px var(--font-ui); padding: 6px 14px; white-space: nowrap; }
.inpage-tabs button[aria-current="true"] { background: var(--primary-container); border-color: var(--primary-container); color: var(--on-primary-container); }
@media (max-width: 860px) {
  .inpage-tabs { background: var(--surface-card); border-top: 1px solid var(--border-subtle); bottom: 0; padding: 8px 16px; top: auto; }
}
.estimated-single-grid { grid-template-columns: minmax(0, 1fr); margin-top: 12px; }
.estimated-stat-row { margin-top: 16px; }
.estimated-detail-list { margin-top: 16px; }
.ep-activity-block { background: var(--surface-low); border-radius: var(--r-lg); margin-top: 16px; padding: 16px; }
.estimated-fluid-summary { margin-top: 14px; }
.catchup-formula-panel { background: var(--surface-low); border-radius: var(--r-xl); margin-top: 16px; padding: 16px; }
.preterm-needs-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 16px; }
.preterm-needs-card { background: var(--surface-low); border-radius: var(--r-lg); padding: 16px; }
.preterm-needs-title { align-items: center; color: var(--ink-muted); display: flex; font: 700 11px/16px var(--font-ui); gap: 8px; letter-spacing: 0.05em; margin-bottom: 8px; text-transform: uppercase; }
.preterm-needs-title .icon { color: var(--primary); height: 16px; width: 16px; }
.preterm-needs-card .detail-line:last-child { border-bottom: 0; }
.preterm-goal { background: var(--primary-tint); border-radius: var(--r-md); margin: 0 -4px 4px; padding: 8px 4px; }

@media (max-width: 640px) {
  .dashboard-section-heading { align-items: flex-start; flex-direction: column; }
  .dashboard-heading-actions { margin-left: 0; }
  .lib-detail-layout { grid-template-columns: 1fr; }
  .lib-detail-rail { position: static; }
  .lib-product-confidence { margin-left: 0; }
  .lib-product-row { align-items: flex-start; flex-wrap: wrap; }
  .lib-product-chevron { align-self: center; }
  .filter-row { grid-template-columns: 1fr; }
  .product-card { grid-template-columns: 1fr; }
  .product-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-card-footer { justify-content: flex-start; }
  .preterm-needs-grid { grid-template-columns: 1fr; }
}
/* Wave 7 cleanup: retained compatibility selectors in the split stylesheet. */
@layer legacy {
/* ---------------------------------------------------------------------
   Dashboard
   --------------------------------------------------------------------- */
.dash-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.dash-cards-pinned { grid-template-columns: repeat(3, 1fr); }
.dashboard-section-heading { align-items: center; display: flex; justify-content: space-between; gap: 12px; }
.dashboard-section-heading h2 { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.dashboard-heading-actions { align-items: center; display: flex; gap: 8px; }
.text-action { border: none; background: none; color: var(--primary); cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; padding: 4px 0; }
.text-action:hover { color: var(--clinical-green-dark); text-decoration: underline; }
.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
.personal-tools-dashboard { margin-bottom: 24px; }
.dash-cards-pinned .dash-card { padding: 14px 16px; }
.dash-cards-pinned .dash-card .dash-icon { margin-bottom: 8px; }
.dash-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.tool-card { display: flex; flex-direction: column; min-height: 116px; padding: 0; position: relative; }
.dash-cards-pinned .tool-card { padding: 0; }
.tool-card-header { align-items: center; background: transparent; border: 0; color: inherit; cursor: pointer; display: flex; font: inherit; gap: 6px; padding: 10px 8px 0 20px; text-align: left; width: 100%; }
.tool-card-header .dash-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-card-header:hover .dash-title { color: var(--primary); }
.dash-cards-pinned .tool-card-header { padding: 8px 6px 0 16px; }
.tool-card .dash-card-launch { padding: 6px 20px 18px; }
.dash-cards-pinned .tool-card .dash-card-launch { padding: 4px 16px 14px; }
.dash-card-launch { align-items: flex-start; background: transparent; border: none; color: inherit; cursor: pointer; display: flex; flex-direction: column; font: inherit; flex: 1; text-align: left; width: 100%; }
.dash-card-launch:hover .dash-title { color: var(--primary); }
.tool-card-actions { align-items: center; display: flex; flex-shrink: 0; gap: 3px; }
.card-menu-trigger {
  align-items: center;
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--primary);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  height: 28px;
  justify-content: center;
  padding: 0;
  width: 28px;
}
.card-menu-trigger { font-size: 19px; line-height: 1; }
.card-menu-trigger:hover { background: var(--primary-tint); border-color: var(--primary-container); }
.btn { border: 1px solid var(--border-strong); border-radius: var(--r-sm); cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; padding: 8px 12px; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary); border-color: var(--primary); }
.btn-secondary { background: var(--surface-card); color: var(--primary); }
.btn-secondary:hover { background: var(--primary-tint); border-color: var(--primary-container); }
.dash-card:hover {
  border-color: var(--primary-container);
  box-shadow: var(--shadow-raised);
  transform: translateY(-1px);
}
.dash-card:active { transform: translateY(0); }

/* Legacy per-page illustrated icons were removed here and unified into
   the shared calculator icon system below. */
.dash-card .dash-icon {
  font-size: 22px;
  margin-bottom: 10px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-tint);
  border-radius: var(--r-md);
}
.dash-card .dash-title { font-size: 14.5px; font-weight: 700; color: var(--ink); margin-bottom: 3px; }
.dash-card .dash-desc { font-size: 12.5px; color: var(--ink-muted); line-height: 1.45; }

.placeholder-box {
  text-align: center;
  padding: 48px 16px;
  color: var(--ink-muted);
  font-size: 14px;
}
.placeholder-box .placeholder-icon {
  font-size: 26px;
  margin-bottom: 12px;
  opacity: 0.6;
}

/* ---------------------------------------------------------------------
   All tools / pinned discovery
   --------------------------------------------------------------------- */
.page-subtitle { color: var(--ink-muted); margin: -10px 0 18px; }
.tool-launch-card { align-items: center; background: none; border: none; color: inherit; cursor: pointer; display: flex; flex: 1; font: inherit; gap: 12px; min-width: 0; padding: 2px 0; text-align: left; }
.tool-launch-card:hover strong { color: var(--primary); }
.tool-launch-icon { align-items: center; background: var(--primary-tint); border-radius: var(--r-sm); display: flex; flex: 0 0 34px; font-size: 18px; height: 34px; justify-content: center; }
.tool-launch-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tool-launch-text strong { color: var(--ink); font-size: 14px; }
.tool-launch-text small { color: var(--ink-muted); font-size: 12px; line-height: 1.35; }
.tool-navigation-toast { align-items: center; background: var(--ink); border: 1px solid var(--primary); border-radius: var(--r-md); bottom: 20px; box-shadow: var(--shadow-raised); color: var(--on-primary); display: flex; font-size: 13px; gap: 14px; left: 50%; max-width: calc(100vw - 32px); padding: 10px 12px 10px 15px; position: fixed; transform: translateX(-50%); z-index: 100; }
.tool-navigation-toast[hidden] { display: none !important; }
.toast-undo-button { background: var(--primary-container); border: none; border-radius: var(--r-sm); color: var(--clinical-green-dark); cursor: pointer; font: inherit; font-size: 12px; font-weight: 800; padding: 6px 9px; }
.toast-undo-button:hover { background: var(--on-primary); }
/* ---------------------------------------------------------------------
   Formula Library
   --------------------------------------------------------------------- */
.lib-tabs {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 14px;
  overflow-x: auto;
}
.lib-tab {
  flex-shrink: 0;
  border: none;
  background: none;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  font-family: inherit;
}
.lib-tab:hover { color: var(--ink); }
.lib-tab.active { color: var(--primary); border-bottom-color: var(--secondary); }

.lib-product-list { display: flex; flex-direction: column; gap: 8px; }
.lib-product-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
  padding: 11px 14px;
  background: var(--surface-card);
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.lib-product-row:hover { border-color: var(--primary-container); background: var(--primary-tint); }
.lib-product-row .lib-product-name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.lib-product-row .lib-product-meta { font-size: 11.5px; color: var(--ink-muted); }
.lib-empty-note { font-size: 13px; color: var(--ink-muted); padding: 16px 4px; }

.lib-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}
.lib-detail-title { font-size: 18px; font-weight: 700; color: var(--ink); }
.lib-detail-subtitle { font-size: 12.5px; color: var(--ink-muted); margin-top: 2px; }

.lib-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.lib-tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-tint);
  border: 1px solid var(--secondary-container);
  border-radius: 999px;
  padding: 3px 10px;
}
/* Data Sources section: "Needs Verification" confidence badge -- a warning tone so a low-confidence
   citation doesn't render visually identical to a well-cited one (defeats the point of tracking it). */
.lib-confidence-warn {
  color: var(--warning);
  background: var(--warning-bg);
  border-color: var(--warning);
}

.lib-section {
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  margin-bottom: 10px;
  overflow: hidden;
}
.lib-section summary {
  cursor: pointer;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  background: var(--primary-tint);
  list-style: none;
}
.lib-section summary::-webkit-details-marker { display: none; }
.lib-section summary::before { content: "▸ "; color: var(--ink-muted); }
.lib-section[open] summary::before { content: "▾ "; }
.lib-section-body { padding: 4px 16px 14px; }

/* ---------------------------------------------------------------------
   Reference tables
   --------------------------------------------------------------------- */
.ref-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-top: 10px;
  font-variant-numeric: tabular-nums;
}
.ref-table th,
.ref-table td {
  border: 1px solid var(--border-subtle);
  padding: 8px 10px;
  text-align: center;
}
.ref-table th {
  background: var(--primary-tint);
  color: var(--ink-muted);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ref-table td:first-child { text-align: left; color: var(--ink-muted); font-weight: 500; }
.ref-table tbody tr:nth-child(even) { background: var(--primary-tint); }
.ref-table tr.ref-row-highlight td { background: var(--primary-tint); font-weight: 600; }

.section-intro {
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.55;
  margin: -4px 0 16px;
}
.micronutrient-panel {
  border-top: 1px solid var(--border-subtle);
  margin-top: 18px;
  padding-top: 14px;
}
.micronutrient-panel summary {
  color: var(--ink);
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  list-style-position: outside;
}
.micronutrient-panel h3 {
  color: var(--ink-muted);
  font-size: 11px;
  margin: 18px 0 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.micronutrient-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.micronutrient-slider {
  display: block;
  position: sticky;
  left: 0;
  z-index: 4;
  width: 100%;
  min-width: 220px;
  margin: 0 0 8px;
  accent-color: var(--secondary);
}
.micronutrient-table {
  min-width: 1180px;
  width: max-content;
}
.micronutrient-table th,
.micronutrient-table td {
  white-space: nowrap;
}
.micronutrient-table thead th {
  min-width: 66px;
  white-space: normal;
  vertical-align: bottom;
}
.micronutrient-table thead th:first-child {
  min-width: 112px;
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--primary-tint);
}
.micronutrient-table tbody th[scope="row"] {
  background: var(--surface-card);
  position: sticky;
  left: 0;
  z-index: 1;
}
.micronutrient-table tbody tr:nth-child(even) th[scope="row"] {
  background: var(--primary-tint);
}
.micronutrient-table .micronutrient-group-row th {
  background: var(--primary-tint);
  color: var(--primary);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-align: left;
  text-transform: uppercase;
}
.micronutrient-unit {
  display: block;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

/* ---------------------------------------------------------------------
   Growth percentile result cards
   --------------------------------------------------------------------- */
.gp-results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-top: 20px;
}
.gp-card {
  background: var(--primary-tint);
  border: 1px solid var(--secondary-container);
  border-radius: var(--r-md);
  padding: 14px 16px;
}
.gp-card-body { display: block; }
.gp-card-title {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--primary);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--secondary-container);
}
.gp-card-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  padding: 4px 0;
}
.gp-card-row span:first-child { color: var(--ink-muted); }
.gp-card-row span:last-child {
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.gp-card-note { font-size: 11px; color: var(--ink-muted); line-height: 1.45; margin-top: 6px; }

.growth-trend-chart {
  margin-top: 18px;
  min-height: 260px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  background: var(--surface-low);
  overflow-x: auto;
}
.growth-trend-chart svg {
  display: block;
  width: 100%;
  min-width: 620px;
  height: auto;
}
.gt-grid-line { stroke: var(--border-subtle); stroke-width: 1; stroke-dasharray: 3 3; }
.gt-band { fill: var(--primary); opacity: 0.06; stroke: none; }
.gt-curve {
  fill: none;
  stroke: var(--primary);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.45;
}
.gt-curve-outer { opacity: 0.3; }
.gt-curve-mid { stroke-width: 2; opacity: 0.85; }
.gt-point { fill: var(--accent-blue); stroke: var(--surface-card); stroke-width: 2.5; cursor: help; }
.gt-point-halo { fill: var(--accent-blue); opacity: 0.14; pointer-events: none; }
.gt-curve-label {
  font: 500 9.5px var(--font-mono);
  fill: var(--ink-muted);
  opacity: 0.75;
}
.gt-curve-label-mid { opacity: 1; }
.gt-tick-label {
  font: 500 10px var(--font-mono);
  fill: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.gt-metric-label {
  font-family: var(--font-ui);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  fill: var(--ink-muted);
}
.gt-empty {
  padding: 42px 16px;
  color: var(--ink-muted);
  text-align: center;
  font-size: 13px;
}
.growth-trend-tooltip {
  position: fixed;
  z-index: 100;
  pointer-events: none;
  display: none;
  max-width: 220px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: var(--ink);
  color: var(--on-primary);
  font-size: 11.5px;
  line-height: 1.4;
  box-shadow: var(--shadow-raised);
}
.growth-trend-tooltip.visible { display: block; }

.growth-top-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  gap: 20px;
  align-items: start;
}
.growth-top-grid > section {
  min-width: 0;
}

.pn-output-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.pn-output-group {
  min-width: 0;
}
.pn-summary-box {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.pn-summary-box span {
  min-width: 0;
  white-space: pre-line;
}
.pn-reference-block {
  margin-top: 18px;
}
.pn-reference-block h3 {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--ink);
}
.pn-reference-heading {
  align-items: center;
  display: flex;
  gap: 10px;
}
.pn-reference-heading .icon-chip {
  flex: 0 0 28px;
  height: 28px;
}
.pn-reference-heading .icon-chip .icon {
  height: 16px;
  width: 16px;
}
.section-heading-row {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}
.pn-reference-block .table-scroll {
  max-height: 60vh;
  overflow-y: auto;
}
.pn-reference-block .ref-table thead th {
  z-index: 2;
}
.table-scroll {
  overflow-x: auto;
}
.pn-line-safe {
  color: var(--primary);
}
.pn-line-warn {
  color: var(--danger);
  font-weight: 700;
}
.pn-elec-indicator {
  display: block;
  font-size: 0.72em;
  min-height: 1.1em;
  margin-top: 2px;
}
.pn-elec-within { color: var(--success); }
.pn-elec-outside { color: var(--warning); }
.pn-input-grid { display: none; }
.pn-additive-rows { display: grid; gap: 10px; margin: 12px 0; }
.pn-additive-row { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(220px, 2fr) 140px auto auto; gap: 10px; align-items: end; padding: 12px; background: var(--primary-tint); border: 1px solid var(--border-subtle); border-radius: 10px; }
.pn-cysteine-entry { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin: 16px 0; padding: 12px; background: var(--primary-tint); border: 1px solid var(--border-subtle); border-radius: 10px; }
.pn-cysteine-entry label { width: 100%; }
.pn-cysteine-entry input { max-width: 220px; }
#pnCysteineGuidanceDialog { max-width: 34rem; border: 1px solid var(--border-strong); border-radius: 10px; padding: 20px; color: var(--ink); }
#pnCysteineGuidanceDialog::backdrop { background: rgba(36,55,64,.35); }
.pn-additive-row label { margin: 0; }
.pn-balance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pn-balance-grid > div { padding: 12px 14px; border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--surface-card); }
.pn-balance-grid h3 { margin: 0 0 8px; font-size: 12px; color: var(--primary); }
.pn-summary-list { color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.65; }
.pn-compatibility { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-strong); }
.pn-compatibility-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pn-compatibility-heading h2 { margin: 0; }
.status-chip { display: inline-flex; padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.status-chip-advisory { color: var(--warning); background: var(--warning-bg); }
.pn-compatibility-result { margin: 12px 0; padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: 8px; font-weight: 700; }
.pn-compatibility-inside { color: var(--success); background: var(--primary-tint); }
.pn-compatibility-boundary, .pn-compatibility-outside, .pn-compatibility-not-assessable { color: var(--warning); background: var(--warning-bg); }
.pn-compatibility-disclaimer { margin: -4px 0 12px; padding: 10px 12px; border: 1px solid var(--warning); border-radius: 8px; background: var(--warning-bg); color: var(--warning); font-size: 12px; line-height: 1.45; }
.pn-compatibility-disclaimer[hidden] { display: none; }
.pn-compatibility-chart-wrap { overflow-x: auto; background: var(--primary-tint); border: 1px solid var(--border-subtle); border-radius: 10px; }
.pn-compatibility-chart { display: block; width: 100%; min-width: 480px; height: auto; }
.pn-compatibility-chart text { fill: var(--ink); font-size: 12px; }
.pn-compatibility-line { fill: none; stroke: var(--primary); stroke-width: 3; }
.pn-compatibility-point { fill: var(--danger); stroke: var(--surface-card); stroke-width: 2; }

/* ---------------------------------------------------------------------
   Responsive — tablet first, then phone
   --------------------------------------------------------------------- */

/* Tablet portrait / narrow desktop: keep sidebar, tighten spacing slightly. */
@media (max-width: 1100px) {
  .wrap { max-width: 100%; padding: 26px 22px 64px; }
  .growth-top-grid { grid-template-columns: 1fr; }
  .grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Below this, collapse to the drawer/hamburger navigation. Chosen at
   860px rather than a phone-only breakpoint so the drawer pattern also
   covers portrait-orientation tablets and split-screen clinical carts. */
@media (max-width: 860px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .app-main { margin-left: 0; }
  .topbar { display: flex; }
  .sidebar-overlay.open { display: block; }
  .dash-cards { grid-template-columns: 1fr; }
  .dash-cards-pinned { grid-template-columns: repeat(2, 1fr); }
  .grid-2, .grid-3, .grid-5 { grid-template-columns: 1fr; }
  .grid-modular { grid-template-columns: 1fr; }
  .renal-ingredient-row { grid-template-columns: 1fr 1fr; }
  .renal-product-field { grid-column: 1 / -1; }
  .renal-remove-ingredient { justify-self: start; }
  .pn-output-grid { grid-template-columns: 1fr; }
  .pn-additive-row { grid-template-columns: 1fr 1fr; }
  .pn-additive-row label:first-child { grid-column: 1 / -1; }
  .pn-balance-grid { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: 1fr 1fr; }
  .wrap { padding: 20px 16px 56px; }
  section { padding: 18px 16px 20px; }
  .patient-banner { padding: 10px 16px 12px; }
  .patient-edit-panel { padding: 16px; }
  .patient-edit-panel .grid-3 { grid-template-columns: 1fr; }
  .patient-organize-heading { flex-direction: column; gap: 12px; }
  .patient-organize-actions { width: 100%; }
  .patient-organize-actions .patient-btn { flex: 1; }
  .patient-banner-summary { max-width: 55vw; }
}

@media (max-width: 640px) {
  .tool-navigation-toast { bottom: 12px; }
  .renal-ingredient-row { grid-template-columns: 1fr; }
  .renal-product-field { grid-column: auto; }
  .renal-goal-row { grid-template-columns: 1fr 1fr; }
  .renal-goal-product-selects { grid-template-columns: 1fr; }
  .renal-goal-range-end { grid-column: 1 / -1; }
  .renal-goal-perkg { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .dash-card, .page { animation: none !important; transition: none !important; }
}
}