/* ============================================================
   CALORIE TRACKER – tracker-specific stylesheet
   Loaded after /shared-styles.css
   ============================================================ */

/* ── Shadow tokens ─────────────────────────────────────────── */
:root {
  --shadow-1: 0 1px 2px 0 rgb(0 0 0 / 0.30);
  --shadow-2: 0 6px 24px rgb(0 0 0 / 0.50);
  --shadow-glow: 0 0 0 2px hsl(var(--accent) / 0.35),
                 0 0 24px 4px hsl(var(--accent) / 0.35);
}

/* ── Base ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body { min-height: 100dvh; margin: 0; }

body {
  font-family: 'Poppins', sans-serif;
  background: hsl(var(--bg));
  color: hsl(var(--text));
}

#main-content {
  min-height: 100dvh;
  background: hsl(var(--bg));
}

/* ── Custom scrollbar ───────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: hsl(var(--surface-2)); }
::-webkit-scrollbar-thumb { background: hsl(var(--border)); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: hsl(var(--accent) / 0.5); }

/* ── Spacing ────────────────────────────────────────────────── */
.p-2  { padding: .5rem; }
.p-3  { padding: .75rem; }
.p-4  { padding: 1rem; }
.p-6  { padding: 1.5rem; }
.p-8  { padding: 2rem; }
.px-3 { padding-inline: .75rem; }
.px-4 { padding-inline: 1rem; }
.px-6 { padding-inline: 1.5rem; }
.py-2 { padding-block: .5rem; }
.py-3 { padding-block: .75rem; }
.py-4 { padding-block: 1rem; }
.pt-2 { padding-top: .5rem; }
.pt-3 { padding-top: .75rem; }
.pt-4 { padding-top: 1rem; }
.pt-6 { padding-top: 1.5rem; }
.pr-2 { padding-right: .5rem; }
.pr-4 { padding-right: 1rem; }

.m-0  { margin: 0; }
.mb-1 { margin-bottom: .25rem; }
.mb-2 { margin-bottom: .5rem; }
.mb-3 { margin-bottom: .75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mt-2 { margin-top: .5rem; }
.mt-3 { margin-top: .75rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.my-4 { margin-block: 1rem; }
.mx-2 { margin-inline: .5rem; }
.mr-2 { margin-right: .5rem; }
.ml-2 { margin-left: .5rem; }
.ml-auto { margin-left: auto; }

/* ── Typography ─────────────────────────────────────────────── */
.text-xs   { font-size: .75rem;   line-height: 1rem; }
.text-sm   { font-size: .875rem;  line-height: 1.25rem; }
.text-md   { font-size: 1rem; }
.text-lg   { font-size: 1.125rem; }
.text-xl   { font-size: 1.25rem; }
.text-2xl  { font-size: 1.5rem; }
.text-3xl  { font-size: 1.875rem; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.italic        { font-style: italic; }

/* ── Borders / radius ────────────────────────────────────────── */
.rounded     { border-radius: .25rem; }
.rounded-md  { border-radius: .375rem; }
.rounded-lg  { border-radius: .5rem; }
.rounded-xl  { border-radius: .75rem; }
.rounded-2xl { border-radius: 1rem; }
.border      { border: 1px solid hsl(var(--border)); }
.border-b    { border-bottom: 1px solid hsl(var(--border)); }
.border-t    { border-top: 1px solid hsl(var(--border)); }
.border-t-2  { border-top-width: 2px; }
.border-default { border-color: hsl(var(--border)); }

/* ── Shadows ────────────────────────────────────────────────── */
.shadow-1    { box-shadow: var(--shadow-1); }
.shadow-2    { box-shadow: var(--shadow-2); }
.shadow-glow { box-shadow: var(--shadow-glow); }
.shadow-md   { box-shadow: 0 4px 6px -1px rgb(0 0 0 / .3), 0 2px 4px -2px rgb(0 0 0 / .1); }

/* ── Display / layout ────────────────────────────────────────── */
.block     { display: block; }
.flex      { display: flex; }
.grid      { display: grid; }
.hidden    { display: none !important; }

.flex-col   { flex-direction: column; }
.flex-wrap  { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.items-end    { align-items: flex-end; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.self-end        { align-self: flex-end; }

.flex-grow, .flex-1 { flex: 1 1 0%; }
.flex-grow-auto     { flex: 1 1 auto; }
.flex-shrink-0, .shrink-0 { flex-shrink: 0; }
.min-w-0   { min-width: 0; }

.gap-1 { gap: .25rem; }
.gap-2 { gap: .5rem; }
.gap-3 { gap: .75rem; }
.gap-4 { gap: 1rem; }
.gap-8 { gap: 2rem; }
.gap-x-4 { column-gap: 1rem; }

.space-x-2 > * + * { margin-left: .5rem; }
.space-x-4 > * + * { margin-left: 1rem; }
.space-y-1 > * + * { margin-top: .25rem; }
.space-y-2 > * + * { margin-top: .5rem; }
.space-y-3 > * + * { margin-top: .75rem; }
.space-y-4 > * + * { margin-top: 1rem; }

.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 768px) {
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:col-span-3  { grid-column: span 3 / span 3; }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .lg\:col-span-2  { grid-column: span 2 / span 2; }
  .lg\:col-span-3  { grid-column: span 3 / span 3; }
}

/* ── Sizing ─────────────────────────────────────────────────── */
.h-fit    { height: fit-content; }
.h-screen { height: 100vh; }
.h-4      { height: 1rem; }
.h-10     { height: 2.5rem; }
.w-4      { width: 1rem; }
.w-10     { width: 2.5rem; }
.w-16     { width: 4rem; }
.w-20     { width: 5rem; }
.w-24     { width: 6rem; }
.max-w-sm  { max-width: 24rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.min-h-\[120px\] { min-height: 120px; }

/* ── Overflow ────────────────────────────────────────────────── */
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }
.max-h-\[45vh\] { max-height: 45vh; }
.max-h-\[70vh\] { max-height: 70vh; }
.max-h-\[90vh\] { max-height: 90vh; }

/* ── Text utils ─────────────────────────────────────────────── */
.truncate          { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whitespace-nowrap { white-space: nowrap; }
.uppercase         { text-transform: uppercase; }
.text-right        { text-align: right; }
.text-left         { text-align: left; }
.opacity-50        { opacity: .5; }
.cursor-pointer    { cursor: pointer; }
.list-disc         { list-style-type: disc; }
.list-inside       { list-style-position: inside; }

/* ── Position ────────────────────────────────────────────────── */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; }
.inset-0  { inset: 0; }
.top-0    { top: 0; }
.top-2    { top: .5rem; }
.top-4    { top: 1rem; }
.right-4  { right: 1rem; }
.bottom-5 { bottom: 1.25rem; }
.right-5  { right: 1.25rem; }
.z-50     { z-index: 50; }

/* ── Tables ─────────────────────────────────────────────────── */
table       { border-collapse: collapse; }
.min-w-full { min-width: 100%; }

/* ── Transitions ────────────────────────────────────────────── */
.transition-all { transition: all .3s ease-in-out; }
.duration-200   { transition-duration: 200ms; }

/* ============================================================
   FORM INPUTS
   ============================================================ */
input[type="number"],
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
textarea,
select,
.input {
  background: hsl(var(--surface-2));
  border: 1px solid hsl(var(--border));
  color: hsl(var(--text));
  padding: .5rem;
  border-radius: .5rem;
  transition: border-color .2s, box-shadow .2s;
  width: 100%;
  min-height: 44px;
  font-family: inherit;
  font-size: 1rem;
}

.input-xs {
  min-height: 36px;
  padding: .25rem .5rem;
  font-size: .875rem;
}

input::placeholder, textarea::placeholder { color: hsl(var(--text-3)); }

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: hsl(var(--accent));
  box-shadow: 0 0 0 3px hsl(var(--accent) / .1);
}

/* ============================================================
   BUTTON EXTRAS
   ============================================================ */
.btn-sm {
  padding: .25rem .75rem;
  font-size: .875rem;
  min-height: 36px;
}

/* 44 px touch targets on mobile */
@media (max-width: 767px) {
  .btn        { min-height: 44px; }
  .icon-btn   { min-height: 44px; min-width: 44px; }
  .btn-sm     { min-height: 44px; }
  .btn-subtle { min-height: 44px; }
}

/* ── Toast message state colors ─────────────────────────────── */
.bg-green-500    { border-color: hsl(var(--success)) !important; }
.bg-red-500      { border-color: hsl(var(--error))   !important; }
.border-warning  { border-color: hsl(var(--warning)) !important; }

/* ============================================================
   SITE NAV
   ============================================================ */
.site-nav {
  background: hsl(var(--surface-1));
  border-bottom: 1px solid hsl(var(--border));
  padding: .75rem 1rem;
  padding-top: max(.75rem, env(safe-area-inset-top, .75rem));
}

/* ============================================================
   APP BAR  (sticky: header + tab-bar + macro-summary)
   ============================================================ */
#app-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: hsl(var(--surface-1));
  border-bottom: 1px solid hsl(var(--border));
  box-shadow: var(--shadow-1);
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  padding: .75rem 1rem;
}

.app-header-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
  flex: 1 1 auto;
}

.app-header-title h1 {
  margin: 0;
  font-size: clamp(.875rem, 3vw, 1.25rem);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-header-controls {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* ============================================================
   TAB BAR
   ============================================================ */
.tab-bar {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  border-top: 1px solid hsl(var(--border));
  background: hsl(var(--surface-1));
}
.tab-bar::-webkit-scrollbar { display: none; }

.tab-btn {
  flex: 0 0 auto;
  padding: .625rem 1rem;
  min-height: 44px;
  font-size: .875rem;
  font-weight: 500;
  font-family: inherit;
  color: hsl(var(--text-2));
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s, background .15s;
}
.tab-btn:hover {
  color: hsl(var(--text));
  background: hsl(var(--surface-2) / .5);
}
.tab-btn.active {
  color: hsl(var(--accent));
  border-bottom-color: hsl(var(--accent));
  font-weight: 600;
}

/* ============================================================
   MACRO SUMMARY BAR  (inside app-bar, Today tab only)
   ============================================================ */
.macro-summary-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
  padding: .5rem 1rem;
  background: hsl(var(--surface-2) / .5);
  border-top: 1px solid hsl(var(--border));
}

.macro-cell { display: flex; flex-direction: column; min-width: 0; }

.macro-cell-label {
  font-size: .625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: hsl(var(--text-3));
  margin-bottom: .1rem;
}

.macro-cell-value {
  font-size: .75rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.macro-cell .hbar {
  height: 4px;
  margin-top: .15rem;
  border-radius: 999px;
  background: hsl(var(--surface-3));
  overflow: hidden;
}

.macro-cell .hbar-fill { height: 100%; border-radius: 999px; }

/* ============================================================
   TAB PANELS
   ============================================================ */
.tab-panel { outline: none; }

.tab-content-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1rem;
}

/* ============================================================
   TODAY TAB LAYOUT
   ============================================================ */
.today-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  padding: 1rem;
  max-width: 1400px;
  margin: 0 auto;
}

@media (min-width: 1024px) {
  .today-layout {
    grid-template-columns: 2fr 3fr;
    align-items: start;
  }
}

.today-inputs {
  background: hsl(var(--surface-1));
  border: 1px solid hsl(var(--border));
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: var(--shadow-1);
}

/* ── Collapsible <details> ──────────────────────────────────── */
details.collapsible {
  border-top: 1px solid hsl(var(--border));
  margin-top: .5rem;
}

details.collapsible > summary {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .625rem 0;
  cursor: pointer;
  font-weight: 600;
  font-size: .9375rem;
  color: hsl(var(--text-2));
  list-style: none;
  user-select: none;
}
details.collapsible > summary::-webkit-details-marker { display: none; }
details.collapsible > summary::before {
  content: '▶';
  display: inline-block;
  font-size: .5625rem;
  transition: transform .18s;
  color: hsl(var(--text-3));
  flex-shrink: 0;
}
details.collapsible[open] > summary::before { transform: rotate(90deg); }
details.collapsible > summary:hover { color: hsl(var(--text)); }

/* ── Staging sticky headings ────────────────────────────────── */
.staging-sticky {
  position: sticky;
  top: 0;
  z-index: 1;
  background: hsl(var(--surface-1));
  padding-top: .75rem;
  padding-bottom: .25rem;
  margin-bottom: .25rem;
}

/* ============================================================
   SECTION CARD
   ============================================================ */
.section-card {
  background: hsl(var(--surface-1));
  border: 1px solid hsl(var(--border));
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: var(--shadow-1);
}

/* ============================================================
   SETTINGS PANEL
   ============================================================ */
.settings-panel {
  max-width: 56rem;
  margin: 0 auto;
  padding: 1.5rem 1rem;
}

.settings-section {
  background: hsl(var(--surface-1));
  border: 1px solid hsl(var(--border));
  border-radius: 1rem;
  padding: 1.5rem;
  margin-bottom: 1rem;
}

/* ============================================================
   PROGRESS BAR / NUTRIENT CARD
   ============================================================ */
.progress-bar-bg   { background-color: hsl(var(--surface-3)); }
.progress-bar-fill {
  transition: width .5s ease-in-out;
  background: linear-gradient(90deg, hsl(var(--accent)), hsl(var(--purple, var(--accent))));
  height: 8px;
  border-radius: 999px;
}

.nutrient-card {
  background: hsl(var(--surface-1));
  border: 1px solid hsl(var(--border));
  transition: transform .3s, box-shadow .3s, border-color .3s;
  border-radius: .75rem;
}
.nutrient-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
  border-color: hsl(var(--accent) / .5);
}

/* ============================================================
   CHART
   ============================================================ */
.chart-container {
  position: relative;
  height: 400px;
  margin: 20px 0;
}

/* ============================================================
   FOOD DROPDOWN
   ============================================================ */
.food-dropdown { position: relative; }

.food-dropdown-list {
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: hsl(var(--surface-2));
  border: 1px solid hsl(var(--border));
  border-top: none;
  border-radius: 0 0 .375rem .375rem;
  max-height: 200px;
  overflow-y: auto;
  z-index: 10;
  box-shadow: var(--shadow-2);
}

.food-dropdown-item {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid hsl(var(--border));
  transition: background-color .2s;
  color: hsl(var(--text));
  min-height: 44px;
  display: flex;
  align-items: center;
}
.food-dropdown-item:hover { background-color: hsl(var(--surface-3)); }
.food-dropdown-item.highlighted {
  background-color: hsl(var(--accent) / .1);
  border-left: 2px solid hsl(var(--accent));
}

/* ============================================================
   MODALS
   ============================================================ */
.modal-backdrop {
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
}
.modal-content {
  background: hsl(var(--surface-1));
  border: 1px solid hsl(var(--border));
  box-shadow: var(--shadow-2);
}

/* ============================================================
   STAGING / FOOD ITEMS
   ============================================================ */
.staging-section {
  background: hsl(var(--surface-2) / .5);
  border: 2px dashed hsl(var(--accent) / .3);
  border-radius: .75rem;
  padding: 1rem;
  transition: border-color .2s, background .2s;
}
.staging-section.drag-over {
  border-color: hsl(var(--accent));
  background: hsl(var(--accent) / .08);
}

.food-items-container {
  min-height: 120px;
  background: hsl(var(--surface-2) / .3);
  border: 1px solid hsl(var(--border));
  border-radius: .5rem;
}

/* ============================================================
   TOAST  (#message-box)
   ============================================================ */
#message-box {
  background: hsl(var(--surface-1));
  border: 1px solid hsl(var(--accent));
  box-shadow: var(--shadow-glow);
  border-radius: .75rem;
}

/* ============================================================
   CHART CHIP PICKER  (replaces <select multiple> for nutrient selection)
   ============================================================ */
.chart-chip-picker {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
}

.chart-chip {
  padding: .25rem .65rem;
  font-size: .75rem;
  line-height: 1.2;
  border-radius: 999px;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--surface-2));
  color: hsl(var(--text-3));
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: border-color .15s, background .15s, color .15s;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}

.chart-chip:hover {
  border-color: hsl(var(--accent) / .5);
  color: hsl(var(--text));
}

.chart-chip.active {
  background: hsl(var(--accent) / .15);
  border-color: hsl(var(--accent));
  color: hsl(var(--accent));
  font-weight: 600;
}

/* ============================================================
   NUTRIENT FILTER BAR
   ============================================================ */
.nutrient-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
}

.nutrient-filter-chip {
  padding: .25rem .75rem;
  font-size: .8125rem;
  border-radius: 999px;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--surface-2));
  color: hsl(var(--text-2));
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: border-color .15s, background .15s, color .15s;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}

.nutrient-filter-chip:hover {
  border-color: hsl(var(--accent) / .5);
  color: hsl(var(--text));
}

.nutrient-filter-chip.active {
  background: hsl(var(--accent) / .15);
  border-color: hsl(var(--accent));
  color: hsl(var(--accent));
  font-weight: 600;
}

/* ============================================================
   NUTRIENT STATUS SUMMARY GRID
   ============================================================ */
.nutrient-status-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
}

.nutrient-status-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .625rem .5rem;
  background: hsl(var(--surface-1));
  border: 1px solid hsl(var(--border));
  border-radius: .75rem;
  text-align: center;
}

.nutrient-status-icon  { font-size: 1.1rem; margin-bottom: .15rem; }
.nutrient-status-count { font-size: 1.375rem; font-weight: 700; line-height: 1; }
.nutrient-status-label { font-size: .6875rem; color: hsl(var(--text-3)); margin-top: .15rem; }

/* ============================================================
   NUTRIENT INLINE BADGES  (.nt-badge variants)
   ============================================================ */
.nt-badge {
  display: inline-flex;
  align-items: center;
  font-size: .65rem;
  padding: .1em .35em;
  border-radius: .25rem;
  margin-left: .25rem;
  vertical-align: middle;
  font-weight: 600;
  line-height: 1;
}

.nt-badge-override { background: hsl(var(--accent) / .15);  color: hsl(var(--accent)); }
.nt-badge-custom   { background: hsl(var(--info)   / .15);  color: hsl(var(--info)); }
.nt-badge-scale    { background: hsl(var(--warning) / .15); color: hsl(var(--warning)); }
.nt-badge-ul       { background: hsl(var(--error)   / .12); color: hsl(var(--warning)); }

.nt-trend {
  font-size: .8em;
  margin-left: .2rem;
  vertical-align: middle;
}

.nt-avg-label {
  font-size: .65rem;
  color: hsl(var(--text-3));
  margin-left: .2rem;
  font-weight: 400;
}

/* Sub-detail line below the KPI bar (today / 3d-avg for averaged nutrients) */
.nt-sub-detail {
  grid-column: 1 / -1;
  font-size: .72rem;
  color: hsl(var(--text-3));
  padding-top: .1rem;
  padding-bottom: .2rem;
  padding-left: calc(6rem + .75rem);
}

/* ============================================================
   NUTRIENT TAGS (shortfall / UL summary lists)
   ============================================================ */
.nutrient-tag {
  display: inline-flex;
  padding: .15rem .5rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 500;
}

.nutrient-tag-bad  {
  background: hsl(var(--error)   / .12);
  color: hsl(var(--error));
  border: 1px solid hsl(var(--error)   / .3);
}

.nutrient-tag-warn {
  background: hsl(var(--warning) / .12);
  color: hsl(var(--warning));
  border: 1px solid hsl(var(--warning) / .3);
}

/* ============================================================
   FOOD ITEM CARD
   ============================================================ */
.food-item-card {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: .625rem .75rem;
  border-radius: .625rem;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--surface-2));
  transition: box-shadow .15s;
}
.food-item-card:hover { box-shadow: var(--shadow-1); }

.food-item-top {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
}

.food-item-name {
  flex: 1 1 0%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  font-size: .875rem;
  color: hsl(var(--text));
}

.food-item-delete {
  flex-shrink: 0;
  min-width: 44px;
  min-height: 44px;
}

.food-item-bottom {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  min-width: 0;
}

.food-item-macros {
  flex: 1 1 auto;
  font-size: .75rem;
  color: hsl(var(--text-2));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.food-item-qty {
  flex: 0 0 auto;
  width: 4.5rem;
}

.food-item-timestamp {
  font-size: .7rem;
  color: hsl(var(--text-3));
  padding-left: .125rem;
}

/* ============================================================
   MOBILE TWEAKS  (< 640 px)  — header two-row deterministic layout
   ============================================================ */
@media (max-width: 640px) {
  /* Stack header vertically so controls never overflow */
  .app-header { flex-direction: column; align-items: stretch; }
  .app-header-title { width: 100%; flex-basis: auto; }
  .app-header-controls {
    width: 100%;
    min-width: 0;
    flex-shrink: 1;
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
  }
  /* Email fills its own row and truncates */
  .app-header-email {
    flex: 1 1 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .75rem;
  }
  /* Logout and Settings remain visible side by side */
  #logout-btn, #open-settings-btn { flex-shrink: 0; }
}

/* ============================================================
   MOBILE TWEAKS  (< 480 px)
   ============================================================ */
@media (max-width: 480px) {
  /* Safety net — no horizontal scroll at any viewport width */
  body, #main-content { overflow-x: hidden; }

  .app-header        { padding: .5rem .75rem; }
  .today-layout      { padding: .75rem; gap: 1rem; }
  .today-inputs      { padding: 1rem .75rem; border-radius: .75rem; }
  .section-card      { padding: 1rem .75rem; border-radius: .75rem; }
  .tab-btn           { padding: .625rem .625rem; font-size: .8rem; }

  /* Macro summary bar: 2×2 grid on narrow phones */
  .macro-summary-bar {
    padding: .4rem .75rem;
    grid-template-columns: repeat(2, 1fr);
  }
  .macro-cell-value  { font-size: .7rem; }

  .settings-panel    { padding: 1rem .75rem; }
  .settings-section  { padding: 1rem .75rem; border-radius: .75rem; }
  .chart-container   { height: 280px; }
  /* Collapse status grid to 2 cols on small phones */
  .nutrient-status-grid { grid-template-columns: repeat(2, 1fr); }
  /* Slightly larger chips for touch targets */
  .chart-chip        { min-height: 36px; font-size: .8rem; }
  .nutrient-filter-chip { min-height: 40px; }
  /* Hide sub-detail on very small screens to save space */
  .nt-sub-detail     { padding-left: 0; }

  /* Food item qty input: full width below the macros line */
  .food-item-bottom  { flex-direction: column; align-items: stretch; }
  .food-item-qty     { width: 100%; }
}