/* Standalone chart styles. No WordPress theme selectors or dependencies. */
:root {
  color-scheme: light;
  --ink: #183d2b;
  --text: #2d4035;
  --muted: #617166;
  --green: #17643b;
  --line: #dce4d9;
  --paper: #fff;
  --wash: #f5f7f0;
  --selected: #e6f1d7;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-block-start: 1rem; }
body { margin: 0; background: var(--wash); color: var(--text); font-size: 16px; line-height: 1.5; }
a { color: var(--green); text-underline-offset: .2em; }
a:hover { color: #103f27; }
button, input, select { font: inherit; }
button, select, summary { cursor: pointer; }
button, input, select { min-inline-size: 0; }
button { color: inherit; }
:focus-visible { outline: 3px solid #2672bd; outline-offset: 4px; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin-block-start: 0; }
h1, h2, h3 { color: var(--ink); }
button, a, summary { -webkit-tap-highlight-color: transparent; }
.sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.js-only { display: none !important; }
.js .js-only { display: initial !important; }
.js .search-field.js-only { display: block !important; }
.skip-link { position: fixed; z-index: 10; inset-block-start: .5rem; inset-inline-start: .5rem; padding: .75rem 1rem; background: white; transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
.page-shell { max-inline-size: 1560px; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 4rem); }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-block-size: 94px; border-block-end: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: .55rem; color: var(--ink); font-size: 21px; font-weight: 730; letter-spacing: -.8px; text-decoration: none; }
.brand img { display: block; inline-size: 146px; block-size: auto; }
.brand-mark { display: grid; place-items: center; background: var(--green); color: white; inline-size: 34px; block-size: 34px; border-radius: 50% 50% 50% 8px; font-size: 25px; letter-spacing: -1px; }
.brand-dot { align-self: flex-start; margin-inline-start: -.4rem; padding-block-start: .25rem; font-size: 10px; }
.back-link { padding-block: .7rem; font-size: 13px; text-decoration: none; }
.back-link span { margin-inline-start: .5rem; }
.chart-intro { max-inline-size: 900px; padding-block: clamp(2rem, 5vw, 4rem) 2.25rem; }
.eyebrow { margin-block-end: .7rem; color: var(--green); text-transform: uppercase; letter-spacing: .14em; font-size: 11px; font-weight: 760; }
h1 { margin-block-end: 1rem; font-size: clamp(2.1rem, 4.5vw, 3.75rem); line-height: 1.12; letter-spacing: -.05em; font-weight: 730; }
.registered { display: inline-block; font-size: .28em; vertical-align: super; letter-spacing: 0; margin-inline-start: .25em; }
.intro-lead { font-size: clamp(1rem, 1.7vw, 1.2rem); margin-block-end: .6rem; }
.comparison-basis { max-inline-size: 720px; color: var(--muted); font-size: 14px; margin-block-end: 1rem; }
.comparison-basis strong { color: var(--ink); }
.chart-guide { max-inline-size: 760px; }
.chart-guide > summary { display: inline-flex; align-items: center; gap: .9rem; min-block-size: 44px; color: var(--green); font-size: 13px; font-weight: 650; }
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::marker { content: ''; }
.chart-guide > summary > span, .group-profile > summary > span, .nutrient-notes summary > span { font-size: 20px; font-weight: 400; }
.disclosure-symbol::before { content: "+"; }
details[open] > summary > .disclosure-symbol::before { content: "−"; }
.guide-content { max-inline-size: 720px; padding: 1rem 1.25rem; background: #edf2e6; border-inline-start: 3px solid #9fbc83; border-radius: 0 10px 10px 0; font-size: 14px; }
.guide-content p { margin-block-end: .85rem; }
.guide-content > :last-child { margin-block-end: 0; }
.chart-workspace { container-type: inline-size; padding: clamp(1rem, 2.5vw, 2rem); background: var(--paper); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 5px 20px #203d2910; }
.workspace-heading { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block-end: 1.5rem; border-block-end: 1px solid var(--line); }
.mode-tabs { display: flex; gap: .25rem; padding: 4px; background: #f0f3ed; border-radius: 12px; }
.mode-tabs a { display: flex; align-items: center; justify-content: center; min-block-size: 43px; padding: .5rem 1rem; border-radius: 9px; color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 650; }
.mode-tabs a[aria-current="page"] { color: white; background: var(--green); box-shadow: 0 2px 4px #183d2b18; }
.dataset-size { color: var(--muted); font-size: 12px; white-space: nowrap; }
.chart-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: 1.75rem; padding-block: 1.5rem; max-inline-size: 900px; }
.chart-controls label { display: block; margin-block-end: .55rem; font-size: 13px; font-weight: 650; }
.chart-controls label > span { display: inline-block; margin-inline-start: .3rem; color: var(--muted); font-size: 11px; font-weight: 400; }
.select-action { display: flex; gap: .5rem; }
select, input[type="search"] { inline-size: 100%; min-block-size: 47px; border: 1px solid #cbd6c7; border-radius: 8px; background: #fff; color: var(--ink); padding: .65rem .8rem; font-size: 16px; }
select { padding-inline-end: 1.75rem; }
select:hover, input:hover { border-color: #899f80; }
.apply-button { flex: 0 0 auto; min-block-size: 47px; padding: .65rem 1rem; border: 1px solid #b8cbb0; border-radius: 8px; background: #edf3e6; color: var(--green); font-size: 14px; font-weight: 650; }
.apply-button:hover { background: #deebd2; }
.results-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .25rem 1.25rem; scroll-margin-block-start: 1rem; }
.results-toolbar h2 { margin-block-end: .2rem; font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.results-toolbar p { margin: 0; font-size: 12px; color: var(--muted); }
.view-switch { flex: 0 0 auto; display: flex; padding: 3px; border: 1px solid var(--line); border-radius: 9px; }
.view-switch a { display: grid; place-items: center; min-block-size: 38px; padding: .35rem .75rem; border-radius: 6px; font-size: 12px; text-decoration: none; color: var(--muted); }
.view-switch a[aria-current="true"] { background: #edf3e6; color: var(--ink); font-weight: 650; }
.selected-note { padding: .85rem 1rem; margin-block-end: 1.25rem; border-radius: 9px; background: #f5f3e9; color: #625d3b; font-size: 13px; }
.compact-view { display: block; }
.compact-comparebar { position: sticky; inset-block-start: 0; z-index: 4; display: flex; justify-content: space-between; align-items: center; gap: .75rem; min-block-size: 52px; margin-block-end: 1rem; padding: .4rem .65rem; background: #f2f6eb; border: 1px solid #dce7d1; border-radius: 8px; box-shadow: 0 3px 8px #183d2b08; }
.compact-comparebar > span { min-inline-size: 0; }
.compact-comparebar strong { display: block; font-size: 12px; line-height: 1.3; }
.compact-comparebar small { display: block; font-size: 10px; color: var(--muted); }
.compact-comparebar a { flex: 0 0 auto; display: flex; align-items: center; min-block-size: 36px; font-size: 11px; }
#nutrient-controls { scroll-margin-block-start: 1rem; }
.food-group { scroll-margin-block-start: 70px; }
.matrix-view { display: none; min-inline-size: 0; }
.class-section + .class-section { margin-block-start: 1.75rem; }
.class-1 { --class-color: #2b683f; --class-wash: #edf4e7; --class-line: #cbdcbe; }
.class-2 { --class-color: #976120; --class-wash: #fcf3e5; --class-line: #ead6b5; }
.class-3 { --class-color: #a04d3b; --class-wash: #fcf0eb; --class-line: #e8cbbf; }
.class-heading { display: flex; align-items: center; gap: .65rem; margin-block-end: .75rem; }
.class-number { display: grid; place-items: center; inline-size: 30px; block-size: 30px; border-radius: 50%; background: var(--class-wash); color: var(--class-color); font-size: 11px; font-weight: 750; }
.class-heading h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--class-color); }
.group-list { display: grid; gap: .6rem; }
.food-group { border: 1px solid var(--line); border-radius: 12px; overflow: clip; scroll-margin-block-start: 70px; }
.food-group[open] { border-color: var(--class-line); }
.food-group > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto 12px; gap: 1rem; align-items: center; padding: 1rem 1.15rem; }
.food-group > summary:hover, .food-group[open] > summary { background: var(--class-wash); }
.group-name { color: var(--ink); font-size: 16px; font-weight: 650; overflow-wrap: anywhere; line-height: 1.35; }
.group-count { display: block; color: var(--muted); font-size: 11px; font-weight: 400; margin-block-start: .3rem; }
.group-metrics { display: flex; align-items: center; gap: 2rem; }
.group-metrics > span { display: flex; flex-direction: column; align-items: flex-end; min-inline-size: 78px; }
.group-metrics strong { flex-shrink: 0; white-space: nowrap; color: var(--class-color); font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.group-metrics > span > span { min-inline-size: 0; overflow-wrap: anywhere; hyphens: auto; color: var(--muted); font-size: 10px; line-height: 1.3; }
.group-metrics .group-selected strong { color: var(--ink); }
.chevron { display: block; inline-size: 7px; block-size: 7px; border-inline-end: 1.8px solid currentColor; border-block-end: 1.8px solid currentColor; transform: rotate(45deg); justify-self: center; margin-block-start: -4px; color: #71806d; }
details[open] > summary > .chevron { transform: rotate(225deg); margin-block-start: 3px; }
.group-content { border-block-start: 1px solid var(--class-line); padding: 0 1.15rem; }
.group-context { display: flex; flex-wrap: wrap; gap: .25rem 1rem; justify-content: space-between; align-items: center; padding-block: .65rem; color: var(--muted); font-size: 10px; }
.group-context a { min-block-size: 30px; display: inline-flex; align-items: center; gap: .25rem; }
.group-profile { border-block: 1px solid var(--line); }
.group-profile > summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-block-size: 45px; font-size: 12px; color: var(--green); font-weight: 650; }
.average-explainer { padding: .5rem .25rem 0; margin-block-end: .5rem; font-size: 12px; color: var(--muted); }
.food-profile { border-block-end: 1px solid var(--line); min-inline-size: 0; }
.food-profile:last-child { border-block-end: 0; }
.food-profile > summary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(60px, auto) 10px; gap: .85rem; align-items: center; min-block-size: 74px; padding-block: .85rem; }
.food-profile > summary:hover { background: #f8faf5; }
.food-name { min-inline-size: 0; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; line-height: 1.4; }
.food-category { display: block; margin-block-start: .2rem; color: var(--muted); font-size: 10px; font-weight: 400; }
.profile-prompt { display: block; margin-block-start: .15rem; font-size: 10px; font-weight: 400; color: #697c60; }
.food-profile[open] > summary .profile-prompt { visibility: hidden; }
.food-metric { min-inline-size: 0; display: flex; flex-direction: column; align-items: flex-end; max-inline-size: 120px; text-align: end; }
.metric-name { min-inline-size: 0; max-inline-size: 100%; overflow-wrap: anywhere; hyphens: auto; font-size: 10px; color: var(--muted); line-height: 1.25; }
.food-metric strong { flex-shrink: 0; white-space: nowrap; font-size: 18px; line-height: 1.4; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--ink); }
.food-rank { font-size: 12px; color: #8a9883; font-variant-numeric: tabular-nums; }
.ranked-foods { border: 1px solid var(--line); border-radius: 12px; padding-inline: 1rem; }
.ranked-foods .food-profile > summary { grid-template-columns: 1.75rem minmax(0, 1fr) minmax(60px, auto) 10px; }
.profile-content { padding: .5rem .75rem .75rem; margin-block-end: 1rem; background: #f8faf5; border-radius: 8px; }
.profile-basis { margin-block-end: .7rem; font-size: 11px; color: var(--muted); }
.profile-table { inline-size: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.profile-table th { text-align: start; font-weight: 450; }
.profile-table td { text-align: end; inline-size: 85px; font-variant-numeric: tabular-nums; }
.profile-table td, .profile-table th { padding: .5rem .45rem; border-block-end: 1px solid #e5eade; }
.profile-table thead { color: var(--muted); font-size: 10px; }
.profile-table thead th:last-child { text-align: end; }
.profile-table .profile-section th { padding-block: 1.25rem .45rem; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--green); }
.profile-table tbody:first-of-type .profile-section th { padding-block-start: .75rem; }
.profile-table tr.selected-nutrient { background: var(--selected); }
.profile-table tr.selected-nutrient th, .profile-table tr.selected-nutrient td { font-weight: 700; }
.profile-legend { margin-block: .8rem 0; font-size: 10px; color: var(--muted); }
.note-link { display: inline-grid; place-items: center; min-inline-size: 28px; min-block-size: 28px; text-decoration: none; font-size: 14px; font-weight: 450; }
.profile-table .note-link { margin-block: -.4rem; }
.matrix-instructions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-block-end: .7rem; font-size: 11px; color: var(--muted); }
.text-button { padding: .5rem .1rem; border: 0; background: transparent; color: var(--green); text-decoration: underline; text-underline-offset: .2em; font-size: inherit; cursor: pointer; }
.table-wrapper { overflow: auto; max-inline-size: 100%; max-block-size: min(72vh, 720px); border: 1px solid var(--line); border-radius: 10px; overscroll-behavior-inline: contain; scrollbar-color: #9dae91 #f1f4ec; scrollbar-width: auto; }
.nutrient-matrix { inline-size: max-content; min-inline-size: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; font-variant-numeric: tabular-nums; }
.nutrient-matrix caption { text-align: start; padding: .8rem 1rem; color: var(--ink); background: #f5f7f1; font-weight: 650; }
.nutrient-matrix caption > span { margin-inline-start: 1rem; color: var(--muted); font-weight: 400; font-size: 10px; }
.nutrient-matrix th, .nutrient-matrix td { border-block-end: 1px solid #e5eade; border-inline-end: 1px solid #edf0e8; padding: .65rem .65rem; text-align: end; inline-size: 108px; min-inline-size: 108px; }
.nutrient-matrix thead th { position: sticky; inset-block-start: 0; z-index: 3; background: #f2f5ed; text-align: start; vertical-align: bottom; max-inline-size: 110px; font-size: 11px; line-height: 1.35; font-weight: 650; }
.nutrient-matrix thead th > a:not(.note-link) { display: block; color: var(--ink); text-decoration: none; padding-block: .25rem; }
.nutrient-matrix thead th > a:not(.note-link):hover { text-decoration: underline; }
.nutrient-matrix .column-unit { display: block; margin-block-start: .6rem; font-size: 9px; color: var(--muted); font-weight: 400; }
.nutrient-matrix .note-link { margin-inline-start: -.35rem; margin-block-end: -.35rem; }
.nutrient-matrix th:first-child { position: sticky; inset-inline-start: 0; inline-size: 220px; min-inline-size: 220px; max-inline-size: 220px; text-align: start; white-space: normal; overflow-wrap: anywhere; box-shadow: 3px 0 5px #183d2b08; }
.nutrient-matrix thead th:first-child { z-index: 5; }
.nutrient-matrix tbody th { z-index: 2; background: white; font-size: 12px; font-weight: 550; }
.nutrient-matrix tbody th small { display: block; font-size: 10px; font-weight: 400; color: var(--muted); margin-block-start: .2rem; }
.nutrient-matrix tbody td { background: #fff; }
.nutrient-matrix .matrix-food:nth-child(even) td, .nutrient-matrix .matrix-food:nth-child(even) th { background: #fafbf7; }
.nutrient-matrix .matrix-group td, .nutrient-matrix .matrix-group th { background: var(--class-wash); font-weight: 700; }
.nutrient-matrix .matrix-class th { color: var(--class-color); font-size: 13px; padding-block: .9rem; background: var(--paper); border-block-end-color: var(--class-line); }
.matrix-group-toggle { text-align: start; background: none; border: 0; padding: 0; font-size: inherit; font-weight: 650; inline-size: 100%; min-block-size: 38px; }
.matrix-group-toggle:disabled { cursor: default; opacity: 1; color: inherit; }
.js .matrix-group-toggle .matrix-chevron { display: inline-block !important; margin-inline-end: .35rem; font-size: 18px; font-weight: 400; }
.matrix-group-toggle[aria-expanded="true"] .matrix-chevron { transform: rotate(90deg); }
.matrix-group-toggle small { padding-inline-start: 1rem; }
.nutrient-matrix .matrix-food th { padding-inline-start: 1.5rem; }
.nutrient-matrix .selected-nutrient { background: var(--selected) !important; color: #234b20; box-shadow: inset 1px 0 #cee0b8, inset -1px 0 #cee0b8; }
.nutrient-matrix thead .selected-nutrient { box-shadow: inset 0 3px var(--green), inset 1px 0 #cee0b8, inset -1px 0 #cee0b8; }
.nutrient-matrix .average-column { min-inline-size: 130px; inline-size: 130px; }
.nutrient-matrix .no-average { background: #f9faf6; }
.data-legend { margin: 1.25rem 0 0; color: var(--muted); font-size: 10px; }
.data-legend > span { margin-inline: .45rem; }
.empty-results { padding: 2rem 1rem; text-align: center; background: var(--wash); border-radius: 10px; font-size: 14px; }
.notes-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; padding-block: 3rem; }
.notes-section h2 { margin-block-end: .65rem; font-size: 25px; letter-spacing: -.03em; font-weight: 650; }
.notes-section > div > p:not(.eyebrow) { font-size: 13px; color: var(--muted); margin-block-end: .7rem; }
.notes-section > div > a { font-size: 13px; }
.nutrient-notes details { border-block-end: 1px solid var(--line); scroll-margin-block-start: 1rem; }
.nutrient-notes summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-block-size: 55px; font-size: 14px; font-weight: 550; }
.nutrient-notes p { padding-block: .25rem 1rem; margin: 0; font-size: 13px; color: var(--muted); }
.nutrient-notes details:target { background: #eaf1df; padding-inline: 1rem; border-radius: 8px; }
.explanation-popover { position: fixed; inset: auto 1rem 1.25rem; inline-size: min(420px, calc(100vw - 2rem)); max-block-size: min(420px, 75vh); overflow: auto; margin: 0 auto; border: 1px solid #bacdaf; border-radius: 14px; padding: 1rem 1.2rem 1.2rem; background: #fff; color: var(--text); box-shadow: 0 12px 55px #173b2b35; }
.explanation-popover::backdrop { background: transparent; }
.explanation-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-block-end: .5rem; }
.explanation-heading h2 { margin: 0; font-size: 17px; letter-spacing: -.02em; }
.explanation-close { display: flex; align-items: center; gap: .5rem; min-block-size: 44px; padding: .35rem .55rem; border: 0; border-radius: 7px; background: #f0f4e9; color: var(--green); font-size: 12px; }
.explanation-close span { font-size: 20px; }
.explanation-popover p { font-size: 14px; line-height: 1.6; margin-block-end: .9rem; }
.explanation-popover > a { font-size: 12px; }
.site-footer { display: flex; align-items: center; gap: 1.5rem; justify-content: space-between; min-block-size: 84px; border-block-start: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.site-footer a { text-decoration: none; }
@container (width >= 900px) {
  .compact-view { display: none; }
  .matrix-view { display: block; }
}
body[data-view="compact"] .compact-view { display: block; }
body[data-view="compact"] .matrix-view { display: none; }
body[data-view="table"] .compact-view { display: none; }
body[data-view="table"] .matrix-view { display: block; }
@container (width < 650px) {
  .workspace-heading { align-items: flex-start; padding-block-end: .85rem; }
  .dataset-size { display: none; }
  .mode-tabs { inline-size: 100%; }
  .mode-tabs a { flex: 1; padding-inline: .65rem; }
  .chart-controls { grid-template-columns: minmax(0, 1fr); gap: .85rem; padding-block: 1rem; }
  .chart-controls label > span { margin-inline-start: .2rem; font-size: 10px; }
  .results-toolbar { align-items: flex-start; flex-direction: column; gap: .85rem; }
  .results-toolbar h2 { font-size: 16px; }
  .view-switch { align-self: flex-end; }
  .view-switch a { min-block-size: 38px; }
  .food-group > summary { padding: .85rem .8rem; gap: .65rem; grid-template-columns: minmax(0, 1fr) minmax(95px, 112px) 8px; }
  .group-name { font-size: 14px; }
  .group-metrics { align-items: stretch; flex-direction: column; gap: .35rem; }
  .group-metrics > span { display: grid; grid-template-columns: minmax(0, 1fr) max-content; align-items: center; gap: .45rem; min-inline-size: 0; }
  .group-metrics strong { font-size: 15px; }
  .group-metrics > span > span { max-inline-size: 65px; font-size: 11px; }
  .group-metrics .group-average strong { font-size: 14px; }
  .group-content { padding-inline: .8rem; }
  .group-context { gap: .15rem .5rem; font-size: 11px; }
  .food-profile > summary { gap: .6rem; grid-template-columns: minmax(0, 1fr) 75px 8px; }
  .food-name { font-size: 14px; }
  .food-metric { inline-size: 75px; max-inline-size: 75px; }
  .food-metric strong { flex-shrink: 0; white-space: nowrap; font-size: 16px; }
  .metric-name { min-inline-size: 0; max-inline-size: 100%; overflow-wrap: anywhere; hyphens: auto; font-size: 11px; }
  .profile-prompt { font-size: 11px; }
  .ranked-foods { padding-inline: .75rem; }
  .ranked-foods .food-profile > summary { grid-template-columns: 1rem minmax(0, 1fr) 75px 8px; gap: .5rem; }
  .ranked-foods .profile-prompt { display: none; }
  .profile-content { padding-inline: .3rem; }
  .profile-table { font-size: 12px; }
  .profile-table td, .profile-table th { padding-inline: .3rem; }
  .matrix-instructions { align-items: flex-start; flex-direction: column; gap: .2rem; }
  .nutrient-matrix th:first-child { inline-size: 145px; min-inline-size: 145px; max-inline-size: 145px; }
  .nutrient-matrix caption { font-size: 11px; }
  .nutrient-matrix caption > span { display: block; margin-inline-start: 0; }
  .nutrient-matrix .average-column { min-inline-size: 110px; inline-size: 110px; }
}
@media (max-width: 650px) {
  .page-shell { padding-inline: 1rem; }
  .site-header { min-block-size: 68px; }
  .brand { font-size: 18px; }
  .brand img { inline-size: 124px; }
  .brand-mark { inline-size: 30px; block-size: 30px; font-size: 23px; }
  .back-link { font-size: 11px; }
  .back-link span { margin-inline-start: .1rem; }
  .chart-intro { padding-block: 1.5rem 1rem; }
  h1 { font-size: clamp(2rem, 8vw, 2.8rem); max-inline-size: 400px; }
  .intro-lead { font-size: 15px; }
  .comparison-basis { font-size: 12px; }
  .chart-workspace { padding: .85rem; border-radius: 15px; margin-inline: -.25rem; }
  .notes-section { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; padding-block: 2rem; }
  .notes-section h2 { font-size: 23px; }
  .site-footer { gap: .5rem; flex-wrap: wrap; padding-block: 1rem; min-block-size: 70px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
@media print {
  body { background: white; font-size: 10pt; }
  .page-shell { padding: 0; }
  .chart-workspace { border: 0; padding: 0; box-shadow: none; }
  .site-header, .chart-controls, .mode-tabs, .view-switch, .matrix-instructions, .site-footer, .profile-prompt { display: none !important; }
  .compact-view { display: block !important; }
  .matrix-view { display: none !important; }
  .food-group, .food-profile { break-inside: avoid; }
}