/* ============================================================
   NUTRI APP — Design System
   Fonts: Fraunces (display) + Plus Jakarta Sans (body)
   Style: organic-elegant, subtle glassmorphism, mobile-first
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600;9..144,700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
  /* ---------- Brand: leaf greens ---------- */
  --green-50:  #F0FDF4;
  --green-100: #DCFCE7;
  --green-200: #BBF7D0;
  --green-300: #86EFAC;
  --green-400: #4ADE80;
  --green-500: #22C55E;
  --green-600: #16A34A;
  --green-700: #15803D;
  --green-800: #166534;
  --green-900: #14532D;

  /* ---------- Accents ---------- */
  --coral-300: #FDBA74;
  --coral-400: #FB923C;
  --coral-500: #F97316;
  --coral-600: #EA580C;

  --honey-300: #FCD34D;
  --honey-400: #FBBF24;
  --honey-500: #F59E0B;

  --berry-400: #FB7185;
  --berry-500: #F43F5E;
  --berry-600: #E11D48;

  --sky-400:   #60A5FA;
  --sky-500:   #3B82F6;

  --plum-500:  #8B5CF6;

  /* ---------- Ink (text + UI) ---------- */
  --ink-900: #0F1729;
  --ink-800: #111827;
  --ink-700: #1F2937;
  --ink-600: #374151;
  --ink-500: #64748B;
  --ink-400: #94A3B8;
  --ink-300: #CBD5E1;
  --ink-200: #E2E8F0;
  --ink-100: #F1F5F9;
  --ink-50:  #F8FAFC;
  --white:   #FFFFFF;

  /* ---------- Surfaces ---------- */
  --bg-canvas: #FAFCF8;
  --bg-mint:   #F0FDF4;

  --glass-bg:        rgba(255,255,255,0.65);
  --glass-bg-strong: rgba(255,255,255,0.85);
  --glass-bg-dark:   rgba(15,23,41,0.55);
  --glass-border:        rgba(255,255,255,0.85);
  --glass-border-strong: rgba(255,255,255,0.95);

  /* ---------- Shadows ---------- */
  --shadow-xs: 0 1px 2px rgba(15,23,42,0.04);
  --shadow-sm: 0 2px 8px rgba(15,23,42,0.06);
  --shadow-md: 0 8px 24px rgba(15,23,42,0.08);
  --shadow-lg: 0 20px 50px rgba(15,23,42,0.12);
  --shadow-xl: 0 30px 80px rgba(15,23,42,0.18);
  --shadow-glow-green: 0 14px 36px rgba(22,163,74,0.30);
  --shadow-glow-coral: 0 14px 36px rgba(249,115,22,0.30);
  --shadow-glow-honey: 0 14px 36px rgba(245,158,11,0.30);

  /* ---------- Radius ---------- */
  --r-xs:  6px;
  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  18px;
  --r-xl:  22px;
  --r-2xl: 26px;
  --r-3xl: 32px;
  --r-pill: 999px;

  /* ---------- Type ---------- */
  --font-display: 'Fraunces', 'Times New Roman', serif;
  --font-body:    'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  /* ---------- Misc ---------- */
  --duration: 220ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html, body {
  font-family: var(--font-body);
  color: var(--ink-900);
  background: var(--bg-canvas);
  font-size: 14px;
  line-height: 1.4;
}

button { font-family: inherit; cursor: pointer; }
a { text-decoration: none; color: inherit; }
input, textarea, select { font-family: inherit; outline: none; }

/* ============================================================
   PHONE CANVAS — every screen file uses this
   ============================================================ */

.phone-stage {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 32px 16px;
  background:
    radial-gradient(1200px 600px at 20% 0%, #ECFDF5 0%, transparent 60%),
    radial-gradient(900px 500px at 90% 20%, #FFF7ED 0%, transparent 60%),
    #F4F7F2;
}

.phone {
  width: 375px;
  height: 812px;
  position: relative;
  background: linear-gradient(180deg, #F0FDF4 0%, #FAFCF8 50%, #FFF7ED 100%);
  border-radius: 44px;
  overflow: hidden;
  box-shadow:
    0 50px 100px -20px rgba(15,23,42,0.25),
    0 30px 60px -30px rgba(22,163,74,0.20),
    0 0 0 8px #15172A,
    0 0 0 9px #2A2D45;
}

.phone--standalone {
  /* When the file is opened directly, no phone chrome — pure screen */
  border-radius: 0;
  box-shadow: none;
}

/* ============================================================
   ATMOSPHERE — soft coloured orbs behind glass
   ============================================================ */

.atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
}
.orb-green  { background: #4ADE80; }
.orb-mint   { background: #6EE7B7; }
.orb-coral  { background: #FB923C; }
.orb-honey  { background: #FCD34D; }
.orb-berry  { background: #FB7185; }
.orb-sky    { background: #93C5FD; }

/* ============================================================
   STATUS BAR (iOS-style)
   ============================================================ */

.status-bar {
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 28px 0;
  position: relative;
  z-index: 30;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--ink-900);
}
.status-bar svg { display: block; }
.status-bar .right { display: flex; gap: 6px; align-items: center; }

/* ============================================================
   SAFE AREAS / SCREEN STRUCTURE
   ============================================================ */

.screen {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.screen-scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  z-index: 1;
  padding-bottom: 110px;
  scrollbar-width: none;
}
.screen-scroll::-webkit-scrollbar { display: none; }

.screen-pad { padding: 0 22px; }

/* ============================================================
   HEADER (sticky glass)
   ============================================================ */

.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 22px 18px;
  position: relative;
  z-index: 20;
}

.app-header .greet-small {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-500);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.app-header .greet-name {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-top: 4px;
  color: var(--ink-900);
}

.icon-btn {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: var(--ink-700);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(15,23,42,0.05);
}
.icon-btn .dot {
  position: absolute;
  top: 11px;
  right: 11px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--coral-500);
  border: 2px solid white;
}

.avatar-btn {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, #FDBA74, #F97316);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.02em;
  border: 1px solid rgba(255,255,255,0.9);
}

/* ============================================================
   GLASS CARDS
   ============================================================ */

.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-2xl);
}
.glass-strong {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--glass-border-strong);
  border-radius: var(--r-2xl);
}
.glass-flat {
  background: white;
  border: 1px solid var(--ink-100);
  border-radius: var(--r-2xl);
}

/* ============================================================
   BOTTOM NAV — glass
   ============================================================ */

.bottom-nav {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 94px;
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-top: 1px solid rgba(255,255,255,0.95);
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  padding: 12px 14px 30px;
  z-index: 25;
}
.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--ink-400);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  position: relative;
  padding-top: 6px;
}
.nav-item.active {
  color: var(--green-700);
}
.nav-item.active::before {
  content: '';
  position: absolute;
  top: -12px;
  width: 28px;
  height: 3px;
  background: var(--green-600);
  border-radius: 0 0 6px 6px;
}
.nav-item.fab {
  background: linear-gradient(135deg, var(--green-600), var(--green-500));
  width: 54px;
  height: 54px;
  border-radius: 50%;
  align-self: center;
  margin-top: -16px;
  box-shadow: 0 12px 28px rgba(22,163,74,0.40);
  border: 4px solid rgba(255,255,255,0.95);
  color: white;
  flex: 0 0 auto;
  padding: 0;
  justify-content: center;
}
.nav-item.fab::before { display: none; }

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  padding: 16px 24px;
  border-radius: var(--r-pill);
  border: none;
  cursor: pointer;
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.btn-primary {
  background: linear-gradient(135deg, var(--green-600) 0%, var(--green-500) 100%);
  color: white;
  box-shadow: var(--shadow-glow-green);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 18px 44px rgba(22,163,74,0.40); }
.btn-coral {
  background: linear-gradient(135deg, var(--coral-500) 0%, var(--coral-400) 100%);
  color: white;
  box-shadow: var(--shadow-glow-coral);
}
.btn-ink {
  background: var(--ink-900);
  color: white;
}
.btn-ghost {
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--ink-200);
  color: var(--ink-900);
}
.btn-block { width: 100%; }

/* ============================================================
   TYPE
   ============================================================ */

.t-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--ink-900);
}
.t-display-italic {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
}
.t-h1 { font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1.05; letter-spacing: -0.03em; }
.t-h2 { font-family: var(--font-body); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; color: var(--ink-900); }
.t-h3 { font-family: var(--font-body); font-weight: 700; font-size: 16px; letter-spacing: -0.015em; color: var(--ink-900); }
.t-body { font-size: 14px; color: var(--ink-600); line-height: 1.5; }
.t-small { font-size: 12px; color: var(--ink-500); }
.t-overline {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.t-num {
  font-family: var(--font-display);
  font-weight: 500;
  font-feature-settings: 'tnum';
  letter-spacing: -0.02em;
}

/* ============================================================
   CHIPS / BADGES / PILLS
   ============================================================ */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: white;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-pill);
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-700);
  white-space: nowrap;
}
.chip-active {
  background: var(--ink-900);
  color: white;
  border-color: var(--ink-900);
}
.chip-green {
  background: var(--green-50);
  border-color: var(--green-200);
  color: var(--green-700);
}
.chip-coral {
  background: #FFF7ED;
  border-color: #FED7AA;
  color: var(--coral-600);
}
.chip-honey {
  background: #FFFBEB;
  border-color: #FDE68A;
  color: #B45309;
}
.chip-sky {
  background: #EFF6FF;
  border-color: #BFDBFE;
  color: var(--sky-500);
}

.dot-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

/* ============================================================
   INPUTS
   ============================================================ */

.field {
  background: white;
  border: 1.5px solid var(--ink-200);
  border-radius: 18px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: border var(--duration);
}
.field:focus-within { border-color: var(--green-500); }
.field input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-900);
}
.field input::placeholder { color: var(--ink-400); font-weight: 400; }
.field-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-500);
  letter-spacing: 0.02em;
  margin-bottom: 8px;
  display: block;
}

/* ============================================================
   PROGRESS / RINGS / BARS
   ============================================================ */

.bar {
  height: 8px;
  background: var(--ink-100);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--green-600), var(--green-400));
}
.bar-fill-coral { background: linear-gradient(90deg, var(--coral-500), var(--coral-300)); }
.bar-fill-honey { background: linear-gradient(90deg, var(--honey-500), var(--honey-300)); }
.bar-fill-sky   { background: linear-gradient(90deg, var(--sky-500), var(--sky-400)); }

/* ============================================================
   FOOD CARDS / MEAL ROWS
   ============================================================ */

.meal-card {
  background: white;
  border-radius: var(--r-2xl);
  padding: 18px;
  border: 1px solid var(--ink-100);
  box-shadow: var(--shadow-sm);
}
.meal-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ============================================================
   UTILS
   ============================================================ */

.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; }
.between { justify-content: space-between; }
.center { justify-content: center; align-items: center; }
.grow { flex: 1; }
.mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; }
.mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; }
.text-center { text-align: center; }
.relative { position: relative; }

/* ============================================================
   ANIMATIONS
   ============================================================ */

@keyframes float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes pulse {
  0%,100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.8; }
}
.float { animation: float 6s ease-in-out infinite; }

/* ============================================================
   MOBILE — Real app behavior
   Override fixed 375×812 body sizing so screens fill the actual
   device. Internal layouts (status bar, header, screen-scroll,
   bottom-nav) already use fluid positioning (inset/right:0), so
   this single override propagates correctly.
   ============================================================ */

@media (max-width: 820px) {
  html {
    width: 100%;
    height: 100%;
    height: 100dvh;
    overflow-x: hidden;
    overscroll-behavior-y: none;
    background: var(--bg-canvas);
  }
  body {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden !important;
    position: relative !important;
    /* Respect iOS notch / safe areas */
    padding-top: env(safe-area-inset-top, 0) !important;
    padding-bottom: 0 !important;
  }

  /* Fake iOS status bar — keep visible to preserve the app look,
     but push it under the real device status bar via safe-area */
  .status-bar {
    padding-top: 14px;
  }

  /* Bottom nav respects iPhone home indicator */
  .bottom-nav {
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0)) !important;
    height: calc(94px + env(safe-area-inset-bottom, 0)) !important;
  }

  /* Larger touch targets feel more native */
  .nav-item { padding-top: 8px; }

  /* Disable text selection on app chrome (feels more native) */
  .status-bar, .app-header, .bottom-nav, .nav-item {
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  /* Smooth momentum scroll inside the app area */
  .screen-scroll {
    -webkit-overflow-scrolling: touch;
  }
}