/* Nutrition uses the shared brand, typography, controls and spacing sources.
   This file owns only the page's component layout. */
.nutrition-page [hidden] { display: none !important; }
.nutrition-page .nutrition-bar { position: sticky; top: var(--header-height); z-index: 900; overflow: visible; background: var(--color-white); box-shadow: 0 .25rem .75rem rgb(var(--color-ink-rgb) / .06); }
.nutrition-bar-scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.nutrition-toolbar { display: grid; grid-template-columns: minmax(14rem, 1fr) auto minmax(14rem, 1fr); align-items: center; gap: var(--space-content); min-width: 48rem; }
.nutrition-toolbar .tab-list { width: max-content; grid-auto-flow: column; grid-auto-columns: auto; grid-template-columns: repeat(2, max-content); }
.nutrition-search { width: 100%; max-width: 20rem; min-width: 0; }
.nutrition-search input { width: 100%; min-width: 0; min-height: var(--button-height); padding: var(--space-control) var(--space-content); border: 1px solid var(--color-ink); border-radius: var(--radius-pill); background: var(--color-white); color: var(--color-ink); }
.nutrition-search input:focus-visible { outline: 2px solid var(--color-ink); outline-offset: -3px; }
.nutrition-filter-action { justify-self: end; width: min(100%, 10rem); }
#nutrition-filter-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.nutrition-filters { position: absolute; top: 100%; right: var(--page-gutter); width: min(38rem, calc(100% - 2 * var(--page-gutter))); max-height: min(70dvh, 38rem); overflow-y: auto; padding: var(--space-panel); border: 1px solid rgb(var(--color-ink-rgb) / .2); border-radius: var(--section-panel-radius); background: var(--color-white); box-shadow: var(--shadow-premium); }
.nutrition-filter-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-content); }
.nutrition-filter-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.nutrition-filter-group legend { margin-bottom: var(--space-content); padding: 0; }
.nutrition-filter-group .content-stack { gap: var(--space-control); }
.nutrition-filter-option { display: flex; align-items: center; gap: var(--space-control); min-height: var(--button-compact-height); cursor: pointer; overflow-wrap: anywhere; }
.nutrition-filter-option input { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--color-ink); }
.nutrition-filter-option input:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 3px; }
.nutrition-filter-footer { display: flex; justify-content: space-between; gap: var(--space-content); margin-top: var(--space-content); padding-top: var(--space-text); border-top: 1px solid rgb(var(--color-ink-rgb) / .2); }
.nutrition-filters[data-mode="plans"] [data-category-group] { grid-column: 1 / -1; }
.nutrition-filters[data-mode="plans"] [data-category-options] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-content); }
.nutrition-section-heading { display: flex; justify-content: space-between; align-items: center; gap: var(--space-content); }
.nutrition-section-heading .section-intro { display: block; min-width: 0; }
.nutrition-collection .section-intro:not([data-section])::before { display: none; }
.nutrition-section-heading .section-intro h2 { max-width: none; }
.nutrition-collection-actions { display: flex; align-items: center; flex: 0 0 auto; width: min(40%, var(--button-width)); gap: var(--space-content); }
.nutrition-recipe-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(16rem, 24%); gap: var(--space-content); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: var(--space-text); }
.nutrition-recipe-track:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 3px; }
.nutrition-card { min-width: 0; align-content: start; scroll-snap-align: start; }
.nutrition-card__image { display: block; overflow: hidden; border-radius: var(--section-panel-radius); background: var(--color-bg); }
.nutrition-card__image img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; transition: transform var(--transition); }
.nutrition-card__image:hover img { transform: scale(1.03); }
.nutrition-card__copy { gap: var(--space-text); }
.nutrition-card h3 { overflow-wrap: anywhere; }
.nutrition-meta { color: rgb(var(--color-ink-rgb) / .7); }
.nutrition-plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); gap: var(--space-group); }
.nutrition-plan { min-width: 0; align-content: start; }
.nutrition-plan > .content-stack { height: 100%; }
.nutrition-plan .button { align-self: end; }
.nutrition-collection[data-expanded="true"] .nutrition-recipe-track,
.nutrition-collection[data-searching="true"] .nutrition-recipe-track { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); grid-auto-columns: auto; overflow: visible; }
@media (max-width: 767.98px) {
  .nutrition-recipe-track { grid-auto-columns: 85%; }
}
@media (prefers-reduced-motion: reduce) {
  .nutrition-card__image img { transition: none; }
  .nutrition-card__image:hover img { transform: none; }
}


.nutrition-detail { width: min(42rem, calc(100% - 2 * var(--page-gutter))); max-height: calc(100dvh - 2 * var(--page-gutter)); padding: 0; border: 0; border-radius: var(--section-panel-radius); color: var(--color-ink); background: var(--color-bg); overflow: auto; }
.nutrition-detail::backdrop { background: rgb(var(--color-ink-rgb) / .55); }
.nutrition-detail__heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-content); padding: var(--space-text) var(--space-panel); }
.nutrition-detail__image { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.nutrition-detail__copy { padding: var(--space-panel); }

.nutrition-ingredients { display: grid; gap: var(--space-control); }
.nutrition-detail-note { border-top: 1px solid rgb(var(--color-ink-rgb) / .2); padding-top: var(--space-content); color: rgb(var(--color-ink-rgb) / .7); }