/* ============================================================
   Caribou Health — Nutrition page, Mobile UX design (Nutrition.html /
   Pages.jsx Nutrition screen). Mobile-scoped reskin of #page-nutrition;
   desktop unchanged. Uses --cbm-* tokens (mobile-auth.css).
   ============================================================ */

@media (max-width: 640px) {

  #page-nutrition { background: var(--cbm-gray-50); }

  /* ── Page header: serif title + sub, per PageHeader ── */
  #page-nutrition h1 {
    font-family: var(--cbm-font-display); font-weight: 400;
    font-size: 28px; color: var(--cbm-gray-900); line-height: 1.2;
  }
  #page-nutrition #nutrition-subtitle { font-size: 14px; line-height: 1.45; }

  /* ── Safety banner → compact teal note ── */
  #page-nutrition .safety-banner {
    background: #e8f4f3 !important; border: 1px solid #d1eae8 !important;
    border-radius: var(--cbm-radius); padding: 12px 13px;
    color: var(--cbm-primary-800);
  }
  #page-nutrition .safety-banner p {
    font-size: 12.5px !important; line-height: 1.5;
    color: var(--cbm-primary-800) !important;
  }
  #page-nutrition .safety-banner svg { color: var(--cbm-primary-600) !important; }

  /* ── Cards: design language + serif section titles ── */
  #page-nutrition .card {
    border-radius: 16px; border: 1px solid var(--cbm-gray-200);
    box-shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1);
  }
  #page-nutrition .card h2, #page-nutrition .card h3 {
    font-family: var(--cbm-font-display); font-weight: 400; color: var(--cbm-gray-900);
  }

  /* ── Meal cards: rounded rows, slot/kcal strip, teal accents ── */
  #page-nutrition .meal-card {
    border: 1px solid var(--cbm-gray-200); border-radius: 16px;
    background: #fff; overflow: hidden;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
  }
  #page-nutrition .meal-card-header {
    background: var(--cbm-gray-50); border-bottom: 1px solid var(--cbm-gray-200);
  }
  #page-nutrition .meal-type {
    font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--cbm-primary-700);
  }
  #page-nutrition .meal-name {
    font-weight: 600; color: var(--cbm-gray-800); font-size: 15px;
  }
  #page-nutrition .meal-calories {
    font-size: 12.5px; font-weight: 700; color: var(--cbm-primary-700);
  }
  #page-nutrition .meal-eaten-btn { border-radius: 9999px; }
  #page-nutrition .nutrition-condition-tag {
    display: inline-flex; align-items: center; gap: 4px;
    background: #e8f4f3; color: var(--cbm-primary-700);
    border: 1px solid #d1eae8; border-radius: 9999px;
    padding: 3px 10px; font-size: 12px; font-weight: 600;
  }

  /* ── Meal tracking rows + macro/weight stats per design tracker ── */
  #page-nutrition .meal-track-item {
    border: 1px solid var(--cbm-gray-200); border-radius: 12px;
    background: #fff; margin-bottom: 8px;
  }
  #page-nutrition .macro-value, #page-nutrition .weight-stat-value {
    font-weight: 700; color: var(--cbm-gray-800);
  }
  #page-nutrition .macro-label, #page-nutrition .weight-stat-label {
    font-size: 11.5px; color: #6b7280;
  }

  /* ── Buttons: brand gradient / pill secondary ── */
  #page-nutrition .btn-primary {
    background: linear-gradient(135deg, var(--cbm-primary-500) 0%, var(--cbm-primary-600) 100%);
    border-radius: var(--cbm-radius);
  }
  #page-nutrition .btn-sm { border-radius: 9999px; }
}