/* ============================================================
   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;
  font-size: clamp(.875rem, 1.6vw, 1rem);
  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 (fluid) ─────────────────────────────────────── */
.text-xs   { font-size: clamp(.6875rem, 1.2vw, .75rem);   line-height: 1rem; }
.text-sm   { font-size: clamp(.8125rem, 1.4vw, .875rem);  line-height: 1.25rem; }
.text-md   { font-size: clamp(.9375rem, 1.6vw, 1rem); }
.text-lg   { font-size: clamp(1rem, 1.8vw, 1.125rem); }
.text-xl   { font-size: clamp(1.125rem, 2vw, 1.25rem); }
.text-2xl  { font-size: clamp(1.25rem, 2.4vw, 1.5rem); }
.text-3xl  { font-size: clamp(1.5rem, 3vw, 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[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

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);
}

/* ── Activity level icons ───────────────────────────────────── */
.activity-icon { color: hsl(var(--text-3)); margin-top: 2px; }

/* ============================================================
   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));
  position: relative;
}
.tab-bar::-webkit-scrollbar { display: none; }

.tab-bar-wrap {
  position: relative;
}
.tab-bar-wrap::before,
.tab-bar-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 32px;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity .2s;
}
.tab-bar-wrap::before {
  left: 0;
  background: linear-gradient(to right, hsl(var(--surface-1)), transparent);
}
.tab-bar-wrap::after {
  right: 0;
  background: linear-gradient(to left, hsl(var(--surface-1)), transparent);
}
.tab-bar-wrap.scroll-left::before  { opacity: 1; }
.tab-bar-wrap.scroll-right::after  { opacity: 1; }

.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;
}

@media (max-width: 480px) {
  .tab-btn { padding: .5rem .625rem; font-size: .8125rem; }
}

/* ============================================================
   MACRO SUMMARY BAR  (inside app-bar, Today tab only)
   ============================================================ */
.macro-summary-bar {
  display: flex;
  flex-direction: column;
  gap: .375rem;
  padding: .5rem 1rem;
  background: hsl(var(--surface-2) / .5);
  border-top: 1px solid hsl(var(--border));
}

/* Calorie hero section in sticky bar */
.macro-cal-hero {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .25rem .5rem;
}
.macro-cal-remaining {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1;
}
.macro-cal-meta {
  font-size: .6875rem;
  color: hsl(var(--text-3));
  white-space: nowrap;
}
.macro-cal-bar {
  width: 100%;
  height: 4px;
  flex-shrink: 0;
}

/* P / F / C grid */
.macro-pfc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .375rem;
}

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

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

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

.macro-cell-remain {
  font-size: .625rem;
  font-weight: 500;
}

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

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

/* ============================================================
   TODAY HERO (dashboard output, calorie summary card)
   ============================================================ */
.today-hero {
  margin-bottom: 1rem;
  padding: 1rem 1.25rem;
  background: hsl(var(--surface-2));
  border: 1px solid hsl(var(--border));
  border-radius: .75rem;
}

.today-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.today-hero-remaining { text-align: left; }
.today-hero-label {
  font-size: .6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: hsl(var(--text-3));
}
.today-hero-number {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.1;
}

.today-hero-stats {
  display: flex;
  gap: 1rem;
  text-align: right;
}
.today-hero-stat {
  display: flex;
  flex-direction: column;
}
.today-hero-stat-val {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.2;
}
.today-hero-stat-label {
  font-size: .625rem;
  color: hsl(var(--text-3));
}
.today-mode-badge {
  font-size: .5625rem;
  font-weight: 600;
}

.today-warnings {
  margin-top: .5rem;
  padding-top: .375rem;
  border-top: 1px solid hsl(var(--border));
}
.today-warning-line {
  font-size: .6875rem;
  color: hsl(var(--warning));
  line-height: 1.4;
}

.today-macros {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

/* ============================================================
   VACATION / LOW-LOG QUICK ESTIMATE (#49)
   ============================================================ */
.vacation-quick-panel {
  padding: .75rem;
  margin-bottom: .75rem;
  border-radius: .5rem;
  background: hsl(var(--surface-2));
  border: 1px dashed hsl(var(--border));
}
.vacation-quick-header {
  margin-bottom: .5rem;
}
.vacation-quick-presets {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .375rem;
}
.vacation-quick-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .5rem .25rem;
  font-size: .75rem;
  line-height: 1.3;
}
.vacation-quick-label {
  font-weight: 600;
}
.vacation-quick-hint {
  font-size: .625rem;
  color: hsl(var(--text-3));
}
.vacation-quick-custom {
  display: flex;
  gap: .375rem;
  margin-top: .375rem;
}
.vacation-quick-custom input {
  flex: 1;
  min-width: 0;
}

/* ============================================================
   TARGET BREAKDOWN (expandable financial-statement, #48)
   ============================================================ */
.target-breakdown-details {
  position: relative;
}
.target-breakdown-details > summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.target-breakdown-details > summary::-webkit-details-marker { display: none; }
.target-breakdown-details[open] > summary .today-hero-stat-label {
  opacity: .7;
}

.target-breakdown-panel {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 20;
  min-width: 16rem;
  padding: .75rem;
  background: hsl(var(--surface-1));
  border: 1px solid hsl(var(--border));
  border-radius: .5rem;
  box-shadow: var(--shadow-2);
  text-align: left;
}

.target-breakdown-section {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding-bottom: .5rem;
  margin-bottom: .5rem;
  border-bottom: 1px solid hsl(var(--border));
}
.target-breakdown-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.target-breakdown-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .75rem;
  font-size: .75rem;
  line-height: 1.5;
}
.target-breakdown-final {
  padding-top: .375rem;
  margin-top: .125rem;
  border-top: 2px solid hsl(var(--text-3));
  font-weight: 700;
  font-size: .8125rem;
}

.target-breakdown-note {
  font-size: .6875rem;
  color: hsl(var(--text-3));
  margin-top: .375rem;
  font-style: italic;
}

/* ============================================================
   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;
  width: .5625rem;
  height: .5625rem;
  border-right: 2px solid hsl(var(--text-3));
  border-bottom: 2px solid hsl(var(--text-3));
  transform: rotate(-45deg);
  transition: transform .18s;
  flex-shrink: 0;
}
details.collapsible[open] > summary::before { transform: rotate(45deg); }
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: clamp(220px, 50vw, 420px);
  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));
}

/* ============================================================
   SAVE CONFIRMATION
   ============================================================ */
.btn-saved {
  background: hsl(var(--success, 142 71% 45%)) !important;
  color: #fff !important;
  pointer-events: none;
  transition: background .2s;
}

/* ============================================================
   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);
  min-width: 280px;
}
@media (max-width: 360px) {
  .modal-content { padding: 1rem !important; min-width: 0; }
}

/* ============================================================
   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;
}

/* ============================================================
   SHARED DATE-RANGE CONTROL (#50)
   ============================================================ */
.date-range-control {
  margin-bottom: .5rem;
}
.date-range-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
}
.date-range-chip {
  padding: .2rem .5rem;
  font-size: .6875rem;
  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;
}
.date-range-chip:hover {
  border-color: hsl(var(--accent) / .5);
  color: hsl(var(--text));
}
.date-range-chip.active {
  background: hsl(var(--accent) / .15);
  border-color: hsl(var(--accent));
  color: hsl(var(--accent));
  font-weight: 600;
}
.date-range-custom {
  display: flex;
  align-items: center;
  gap: .375rem;
  margin-top: .375rem;
}
.date-range-custom input[type="date"] {
  font-size: .75rem;
  padding: .2rem .375rem;
  border: 1px solid hsl(var(--border));
  border-radius: .25rem;
  background: hsl(var(--surface-1));
  color: hsl(var(--text));
}

/* ============================================================
   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-status-good { background: hsl(var(--success) / .15); color: hsl(var(--success)); text-transform: uppercase; letter-spacing: .03em; }
.nt-status-warn { background: hsl(var(--warning) / .15); color: hsl(var(--warning)); text-transform: uppercase; letter-spacing: .03em; }
.nt-status-bad  { background: hsl(var(--error)   / .15); color: hsl(var(--error));   text-transform: uppercase; letter-spacing: .03em; }
.nt-status-over { background: hsl(var(--error)   / .20); color: hsl(var(--error));   text-transform: uppercase; letter-spacing: .03em; font-weight: 600; }

.hbar-ul-marker {
  position: absolute;
  top: -2px; bottom: -2px;
  width: 2px;
  background: hsl(var(--error));
  opacity: .7;
  border-radius: 1px;
}

.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);
}

/* ============================================================
   FORM ERROR (inline validation linked via aria-describedby)
   ============================================================ */
.form-error {
  font-size: .75rem;
  color: hsl(var(--error));
  margin-top: .25rem;
}

/* ============================================================
   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: tighter on narrow phones */
  .macro-summary-bar { padding: .375rem .75rem; }
  .macro-cal-remaining { font-size: 1.125rem; }
  .macro-cell-value { font-size: .75rem; }

  /* Today hero: stack vertically */
  .today-hero-top { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .today-hero-stats { align-self: stretch; justify-content: space-between; text-align: left; }
  .today-hero-number { font-size: 2rem; }

  .settings-panel    { padding: 1rem .75rem; }
  .settings-section  { padding: 1rem .75rem; border-radius: .75rem; }
  /* chart-container uses clamp() — no fixed override needed */
  /* 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; }

  /* Raise nutrient input scroll cap on small phones */
  .max-h-\[45vh\] { max-height: 65vh; }

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

  /* Date-range custom row: wrap From/To on narrow screens */
  .date-range-custom { flex-wrap: wrap; }

  /* Settings actions: ensure buttons wrap cleanly */
  .settings-panel .flex.justify-between { flex-wrap: wrap; gap: .5rem; }
}

/* ============================================================
   NARROW MOBILE  (≤ 390 px) — iPhone SE / compact Android
   ============================================================ */
@media (max-width: 390px) {
  .app-header        { padding: .375rem .5rem; }
  .today-layout      { padding: .5rem; gap: .75rem; }
  .today-inputs      { padding: .75rem .5rem; }
  .section-card      { padding: .75rem .5rem; }
  .tab-content-inner { padding: .75rem .5rem; }
  .settings-panel    { padding: .75rem .5rem; }
  .settings-section  { padding: .75rem .5rem; }

  /* Tab bar: minimum padding for 6 tabs */
  .tab-btn { padding: .5rem .5rem; font-size: .75rem; }

  /* Macro summary: more compact */
  .macro-summary-bar { padding: .25rem .5rem; }
  .macro-cal-remaining { font-size: 1rem; }
  .macro-cell-label { font-size: .5rem; }
  .macro-cell-value { font-size: .6875rem; }

  /* Today hero */
  .today-hero { padding: .75rem; }
  .today-hero-number { font-size: 1.75rem; }
  .today-hero-stat-val { font-size: 1rem; }

  /* Target breakdown: constrain to viewport */
  .target-breakdown-panel { min-width: 0; width: calc(100vw - 2rem); right: -.5rem; }

  /* Vacation quick presets: tighter */
  .vacation-quick-btn { padding: .375rem .125rem; font-size: .6875rem; }

  /* Date-range chips: compact text but 32px min touch target */
  .date-range-chip { padding: .15rem .375rem; font-size: .625rem; min-height: 32px; display: inline-flex; align-items: center; }
  .date-range-custom input[type="date"] { font-size: .6875rem; padding: .15rem .25rem; }

  /* Modal padding tighter */
  .modal-content { padding: .75rem !important; }

  /* Food search row: tighter inline qty */
  #food-inline-qty { width: 2.75rem; }
}

/* ── Undo toast ────────────────────────────────────────────── */
.undo-toast {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1.25rem;
  background: hsl(var(--surface-2));
  color: hsl(var(--text));
  border: 1px solid hsl(var(--border));
  border-radius: .75rem;
  box-shadow: var(--shadow-2);
  z-index: 60;
  font-size: .875rem;
  animation: undo-slide-up .2s ease-out;
}
.undo-toast.hidden { display: none; }
.undo-toast-btn {
  padding: .25rem .75rem;
  background: hsl(var(--accent));
  color: hsl(var(--bg));
  border: none;
  border-radius: .375rem;
  font-weight: 600;
  font-size: .8125rem;
  cursor: pointer;
  white-space: nowrap;
}
.undo-toast-btn:hover { opacity: .85; }
@keyframes undo-slide-up {
  from { transform: translateX(-50%) translateY(1rem); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0);    opacity: 1; }
}

/* ── Sync notice ───────────────────────────────────────────── */
.sync-notice {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .75rem;
  margin-bottom: .75rem;
  background: hsl(var(--info) / .12);
  border: 1px solid hsl(var(--info) / .25);
  border-radius: .5rem;
  font-size: .75rem;
  color: hsl(var(--text-2));
  line-height: 1.35;
}
.sync-notice.hidden { display: none; }
.sync-notice-dismiss {
  margin-left: auto;
  background: none;
  border: none;
  color: hsl(var(--text-3));
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 .25rem;
  flex-shrink: 0;
}
.sync-notice-dismiss:hover { color: hsl(var(--text)); }

/* ── Skeleton loader ───────────────────────────────────────── */
.skeleton-loader {
  max-width: 48rem;
  margin: 0 auto;
  padding: 1rem 1rem 2rem;
}
.skeleton-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .75rem 0 1rem;
}
.skeleton-tabs {
  display: flex;
  gap: .75rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid hsl(var(--border));
}
.skeleton-macros {
  display: flex;
  gap: .5rem;
  padding: .75rem 0;
}
.skeleton-card {
  background: hsl(var(--surface-1));
  border-radius: .75rem;
  padding: 1rem;
  margin-top: .75rem;
}
.skeleton-line {
  background: hsl(var(--surface-2));
  border-radius: .25rem;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}
@keyframes skeleton-pulse {
  0%, 100% { opacity: .4; }
  50%      { opacity: .8; }
}