/* ============================================================
   Health App — Visual Identity Theme
   ------------------------------------------------------------
   Load AFTER css/style.css so these rules win by cascade order
   (equal-or-higher specificity; no !important needed).
   Ember terracotta + espresso + warm ivory + champagne gold.
   ============================================================ */

:root {
  /* brand tokens (new names; also remap the base vars below) */
  --brand-deep: #7c2d12;   /* deep ember */
  --brand: #c2410c;        /* burnt terracotta */
  --brand-soft: #fbede3;   /* warm wash */
  --accent: #c9a24b;       /* champagne gold */
  --accent-soft: #faf3e2;  /* gold wash */
  --ink: #2b1d16;          /* espresso */
  --muted: #8a7a6e;        /* warm gray */

  /* remap the style.css variables so every component follows */
  --primary: #c2410c;
  --primary-dark: #9a3412;
  --primary-soft: #fbede3;
}

/* ---------- base ---------- */
body {
  background:
    radial-gradient(1200px 420px at 50% -140px, #f7e8d9 0%, rgba(247,232,217,0) 60%),
    #faf7f1;
  color: var(--ink);
}
h1, h2, h3 { color: var(--ink); }

/* ---------- wordmark ---------- */
.brand-mark { display: inline-flex; align-items: center; gap: 9px; }
.brand-mark svg.logo-mark {
  width: 28px; height: 28px; display: block; flex: none;
  filter: drop-shadow(0 2px 4px rgba(124, 45, 18, 0.35));
}
.brand-mark .word {
  font-weight: 700; font-size: 20px; line-height: 1;
  letter-spacing: -0.4px; color: var(--ink);
}
.brand-mark .word em { font-style: normal; color: var(--brand); }
/* auth-screen variant */
.brand-mark-lg svg.logo-mark { width: 46px; height: 46px; }
.brand-mark-lg .word { font-size: 32px; letter-spacing: -0.9px; }
.brand-mark-lg { gap: 12px; }

/* topbar brand link: ink wordmark instead of plain colored text */
#topbar .brand { color: var(--ink); text-decoration: none; }
#topbar .brand:hover { color: var(--ink); }
#topbar .brand .word { font-size: 20px; }

/* ---------- cards ---------- */
.card {
  border-radius: 18px;
  border: 1px solid rgba(124, 45, 18, 0.09);
  box-shadow:
    0 1px 2px rgba(124, 45, 18, 0.05),
    0 10px 28px rgba(124, 45, 18, 0.07);
}
.stat, .result-cell {
  background: var(--brand-soft);
  border: 1px solid rgba(124, 45, 18, 0.07);
}
.tip-card { border-left-color: var(--brand); }

/* ---------- section titles: small-caps eyebrow ---------- */
.section-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 800; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--muted);
  margin: 20px 0 10px;
}
.section-title::after {
  content: ""; height: 1px; flex: 1;
  background: linear-gradient(90deg, var(--line), transparent);
}

/* ---------- buttons ---------- */
.btn {
  background: linear-gradient(180deg, #d6541a 0%, var(--brand) 55%, #9a3412 100%);
  box-shadow: 0 2px 8px rgba(194, 65, 12, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(124, 45, 18, 0.35);
  transition: transform 0.08s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.btn:hover { filter: brightness(1.05); background: linear-gradient(180deg, #d6541a 0%, var(--brand) 55%, #9a3412 100%); }
.btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 3px rgba(194, 65, 12, 0.25), inset 0 2px 5px rgba(0, 0, 0, 0.18);
  filter: brightness(0.97);
}
.btn.secondary {
  background: #ffffff;
  border: 1.5px solid var(--line);
  box-shadow: none;
  color: var(--ink);
}
.btn.secondary:hover { border-color: var(--brand); background: var(--brand-soft); filter: none; }
.btn.danger {
  background: linear-gradient(180deg, #cf5a40 0%, #b8492f 100%);
  border-color: rgba(150, 50, 25, 0.4);
  box-shadow: 0 2px 8px rgba(176, 73, 47, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* ---------- tabbar: active tab pill ---------- */
#tabbar a, #tabbar button { position: relative; z-index: 0; }
#tabbar a.active::before, #tabbar button.active::before {
  content: "";
  position: absolute; left: 14px; right: 14px; top: 9px; bottom: 9px;
  background: var(--brand-soft);
  border: 1px solid rgba(194, 65, 12, 0.12);
  border-radius: 13px;
  z-index: -1;
}
#tabbar a.active, #tabbar button.active { color: var(--brand-deep); }

/* ---------- wheel picker: brand highlight ---------- */
.wheel-item.sel {
  color: var(--brand-deep);
  background: rgba(194, 65, 12, 0.09);
  border-radius: 10px;
}

/* ---------- streak badge ----------
   Usage: <span class="streak-badge"><svg…flame…></svg>5</span> */
.streak-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 13px 5px 9px;
  border-radius: 999px;
  background: linear-gradient(180deg, #e7b95c 0%, var(--accent) 100%);
  color: #fff; font-size: 13px; font-weight: 800;
  letter-spacing: 0.2px;
  box-shadow: 0 2px 8px rgba(201, 162, 75, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(140, 108, 30, 0.35);
}
.streak-badge svg { width: 15px; height: 15px; display: block; }

/* ---------- grade pills ----------
   Usage: <span class="grade grade-a">A</span> */
.grade {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px; font-weight: 800; letter-spacing: 0.6px;
  border: 1px solid transparent;
}
.grade-a { background: #dff0e6; color: #14663c; border-color: rgba(20, 102, 60, 0.18); }
.grade-b { background: #ecf4ea; color: #3d7a4b; border-color: rgba(61, 122, 75, 0.18); }
.grade-c { background: #fdf3dd; color: #a85f04; border-color: rgba(168, 95, 4, 0.22); }
.grade-d { background: #fbe7e1; color: #b0432c; border-color: rgba(176, 67, 44, 0.22); }

/* ---------- premium upsell ----------
   .premium-card is the standalone card style.
   The existing .upgrade-prompt markup gets the same treatment
   so it works without view changes. */
.premium-card,
.card.upgrade-prompt {
  background: linear-gradient(135deg, #2b1d16 0%, #4a2c17 55%, #5c3315 100%);
  border: 1px solid rgba(201, 162, 75, 0.35);
  color: #ffffff;
  box-shadow: 0 12px 32px rgba(43, 29, 22, 0.4);
}
.premium-card h1, .premium-card h2, .premium-card h3,
.card.upgrade-prompt h2 { color: #ffffff; }
.premium-card .sub, .premium-card p,
.card.upgrade-prompt .sub { color: rgba(255, 255, 255, 0.82); }
.premium-card .lock, .card.upgrade-prompt .lock {
  color: #e7c878;
  font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 1.6px;
}
.premium-card .btn, .card.upgrade-prompt .btn {
  background: linear-gradient(180deg, #ecd28a 0%, #c9a24b 100%);
  border: 1px solid rgba(120, 85, 20, 0.4);
  color: #3d2a08;
  box-shadow: 0 3px 12px rgba(201, 162, 75, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.premium-card .btn:hover, .card.upgrade-prompt .btn:hover {
  filter: brightness(1.06);
  background: linear-gradient(180deg, #ecd28a 0%, #c9a24b 100%);
}
.premium-card .feature-list li, .card.upgrade-prompt .feature-list li {
  border-bottom-color: rgba(255, 255, 255, 0.14);
}
.premium-card .feature-list li::before, .card.upgrade-prompt .feature-list li::before {
  border-left-color: #e7c878; border-bottom-color: #e7c878;
}

/* ---------- small refinements ---------- */
.chip.sel { box-shadow: 0 2px 8px rgba(194, 65, 12, 0.3); }
.seg button.sel { color: var(--brand-deep); }
.tab.sel { background: var(--brand-deep); border-color: var(--brand-deep); }
.tab { border-radius: 999px; }
.calc-result { border: 1px solid rgba(194, 65, 12, 0.14); }
.pill { border: 1px solid rgba(194, 65, 12, 0.12); }
.icon-btn:hover { color: var(--brand-deep); }
.link { color: var(--brand); }
.meal-head .name { letter-spacing: -0.2px; }
.auth-wrap .logo { color: var(--ink); }
.progress > div { background: linear-gradient(90deg, var(--brand), var(--brand-deep)); }
.input:focus { outline-color: var(--brand); border-color: var(--brand); }

/* pressed feedback for key tappables */
.mini-btn:active, .chip:active, .tab:active { transform: scale(0.97); }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn, .mini-btn, .chip, .tab { transition: none; }
  .btn:active { transform: none; }
}

/* ---- Food database: verified + combo tags ---- */
.tag { display:inline-block; font-size:10px; font-weight:700; letter-spacing:.02em;
  padding:1px 7px; border-radius:999px; vertical-align:1px; margin-left:4px; }
.tag-verified { background:#e8f5e9; color:#1b6b3a; border:1px solid #bfe3c9; }
.tag-combo { background:#fff4e0; color:#8a5a00; border:1px solid #f0d9a8; }
.tag-mine { background:#fbe9dd; color:#9a3412; border:1px solid #f0cfae; }

/* ============================================================
   CATCHY PASS — vibrant color, same neat layout.
   Warm ember washes, gradient numbers/bars, lively accents.
   ============================================================ */

/* livelier page wash: whispers of apricot + rose over warm ivory */
body {
  background:
    radial-gradient(900px 380px at 10% -120px, rgba(255, 176, 102, 0.16) 0%, rgba(255,176,102,0) 60%),
    radial-gradient(1000px 420px at 90% -140px, rgba(244, 114, 182, 0.1) 0%, rgba(244,114,182,0) 60%),
    radial-gradient(1200px 420px at 50% -140px, #f7e8d9 0%, rgba(247,232,217,0) 60%),
    #faf7f1;
}

/* warm hairline under the topbar */
#topbar { position: relative; }
#topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  background: linear-gradient(90deg, #fbbf24 0%, #f97316 30%, #c2410c 55%, #e7c878 80%, #c2410c 100%);
  opacity: 0.85;
}

/* big calorie number: gradient ember ink */
.big-number {
  background: linear-gradient(115deg, #ea580c 0%, #c2410c 55%, #7c2d12 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* calorie progress bar: vibrant ember gradient + glow */
.progress > div {
  background: linear-gradient(90deg, #fb923c 0%, #c2410c 55%, #7c2d12 100%);
  box-shadow: 0 0 10px rgba(194, 65, 12, 0.5);
}

/* progress rings: ember monochrome (brand surfaces stay one color) */
.ring .bg { stroke: #f3e4d3; }
.ring .fg { stroke: #c2410c; }

/* colorful macro chips — order is always Protein / Carbs / Fat / Fibre */
.stat-grid .stat { border: none; position: relative; overflow: hidden; }
.stat-grid .stat::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 4px 0 0 4px;
}
.stat-grid .stat:nth-child(1) { background: #ffe9f0; }
.stat-grid .stat:nth-child(1)::before { background: linear-gradient(180deg, #fb7185, #e11d48); }
.stat-grid .stat:nth-child(1) .v { color: #d61f4c; }
.stat-grid .stat:nth-child(2) { background: #fdf0d7; }
.stat-grid .stat:nth-child(2)::before { background: linear-gradient(180deg, #fbbf24, #d97706); }
.stat-grid .stat:nth-child(2) .v { color: #c2660a; }
.stat-grid .stat:nth-child(3) { background: #ece7fb; }
.stat-grid .stat:nth-child(3)::before { background: linear-gradient(180deg, #a78bfa, #7c3aed); }
.stat-grid .stat:nth-child(3) .v { color: #7c3aed; }
.stat-grid .stat:nth-child(4) { background: #d9f3ef; }
.stat-grid .stat:nth-child(4)::before { background: linear-gradient(180deg, #2dd4bf, #0d9488); }
.stat-grid .stat:nth-child(4) .v { color: #0d7d6c; }
.stat-grid .stat .l { color: #6b5d52; }

/* primary buttons: luminous ember */
.btn {
  background: linear-gradient(180deg, #e0651f 0%, #c2410c 48%, #9a3412 100%);
  border: 1px solid rgba(154, 52, 18, 0.45);
  box-shadow: 0 3px 12px rgba(194, 65, 12, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn:hover { filter: brightness(1.06); background: linear-gradient(180deg, #e0651f 0%, #c2410c 48%, #9a3412 100%); }
.btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 3px rgba(194, 65, 12, 0.3), inset 0 2px 5px rgba(0, 0, 0, 0.18);
  filter: brightness(0.97);
}

/* tabbar active pill: warm wash */
#tabbar a.active::before, #tabbar button.active::before {
  background: linear-gradient(135deg, #fbe3cf 0%, #fbede3 100%);
  border: 1px solid rgba(194, 65, 12, 0.25);
}
#tabbar a.active, #tabbar button.active { color: #9a3412; }

/* streak badge: champagne gold pop */
.streak-badge {
  background: linear-gradient(180deg, #eec25e 0%, #d9a93f 60%, #c9962f 100%);
  box-shadow: 0 3px 10px rgba(201, 162, 75, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
a.streak-badge { text-decoration: none; color: #fff; }
a.streak-badge svg:last-child { width: 12px; height: 12px; opacity: 0.85; }

/* ---------- streaks view ---------- */
.streak-stats { display: flex; gap: 10px; }
.streak-stat {
  flex: 1; text-align: center; padding: 14px 8px;
  background: var(--brand-soft); border-radius: 14px;
}
.streak-stat .ico { width: 22px; height: 22px; color: var(--brand); }
.streak-stat b { display: block; font-size: 26px; margin-top: 2px; }
.streak-stat span { font-size: 12px; color: var(--muted); }
.streak-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-top: 10px; }
.cal-dow { text-align: center; font-size: 11px; font-weight: 700; color: var(--muted); padding: 4px 0; }
.cal-day {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: 13px; border-radius: 50%; color: var(--ink); min-width: 0;
}
.cal-day.empty { visibility: hidden; }
.cal-day.done { background: var(--brand); color: #fff; font-weight: 700; }
.cal-day.today { box-shadow: inset 0 0 0 2px var(--brand); font-weight: 700; }
.cal-day.done.today { box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--brand); }
.cal-day.future { opacity: 0.35; }
.cal-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; }
.cal-dot.done { background: var(--brand); }
.cal-dot.today { box-shadow: inset 0 0 0 2px var(--brand); background: #fff; }

/* section titles: tiny color dot before the eyebrow text */
.section-title::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, #fb923c, #c2410c);
  box-shadow: 0 0 6px rgba(251, 146, 60, 0.6);
}

/* ── Luma the coach: lively animations ── */
.coach-hero { position: relative; }
.coach-mascot {
  cursor: pointer;
  border-radius: 28px;
  filter: drop-shadow(0 6px 12px rgba(194, 65, 12, .18));
  -webkit-tap-highlight-color: transparent;
  object-fit: cover;
}
/* idle float applies to the static image; the video carries its own motion */
img.coach-mascot { animation: luma-float 3.4s ease-in-out infinite; }
@keyframes luma-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-9px) rotate(2deg); }
}
/* excited wiggle while Aara is thinking up a reply */
.coach-mascot.thinking { animation: luma-excited .7s ease-in-out infinite; }
@keyframes luma-excited {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  30% { transform: translateY(-11px) scale(1.05, .95) rotate(-4deg); }
  60% { transform: translateY(0) scale(.95, 1.06) rotate(4deg); }
}
/* happy squash-and-stretch on tap */
.coach-mascot.boop { animation: luma-boop .55s ease; }
@keyframes luma-boop {
  0% { transform: scale(1, 1); }
  35% { transform: scale(1.18, .82); }
  60% { transform: scale(.92, 1.1) translateY(-8px); }
  100% { transform: scale(1, 1); }
}
/* speech bubble when you tap Luma */
.luma-bubble {
  position: absolute; left: 104px; top: -8px; z-index: 5;
  background: #fff; border: 1px solid var(--line);
  border-radius: 14px; border-bottom-left-radius: 4px;
  padding: 8px 12px; font-size: 13px; font-weight: 600; color: var(--ink);
  box-shadow: var(--shadow); max-width: 230px;
  animation: msg-in .25s ease;
}

/* chat liveliness: messages glide in, typing dots bounce */
.chat-msg { animation: msg-in .28s ease; }
@keyframes msg-in {
  from { transform: translateY(10px) scale(.98); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.chat-thinking { opacity: 1; }
.tdot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--primary); margin: 0 2px; vertical-align: middle;
  animation: tdot-bounce 1.1s infinite;
}
.tdot:nth-child(2) { animation-delay: .15s; }
.tdot:nth-child(3) { animation-delay: .3s; }
@keyframes tdot-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .45; }
  30% { transform: translateY(-6px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .coach-mascot, .chat-msg, .tdot, .luma-bubble { animation: none; }
}

/* encouraging line under the weight number */
.cheer {
  background: var(--primary-soft); color: var(--primary-dark);
  border-radius: 12px; padding: 10px 14px;
  font-size: 13px; font-weight: 600; margin: 10px 0 2px;
}

/* workout rows: Apple-Fitness-style list, Aara ember identity */
.wo-row { display: flex; align-items: center; gap: 12px; padding: 10px 2px; }
.wo-row + .wo-row { border-top: 1px solid var(--line); }
.wo-ic {
  width: 42px; height: 42px; border-radius: 14px; flex: none;
  background: var(--primary-soft); color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center;
}
.wo-ic svg { width: 22px; height: 22px; }
.wo-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.wo-cal { color: var(--primary); white-space: nowrap; }

/* meal cards: soft tinted headers per meal via order on the diary page */
.meal-card { overflow: hidden; }

/* diary day-nav: keep Prev / date / actions on one tidy row */
.day-nav { gap: 6px; }
.day-nav .btn.sm { white-space: nowrap; padding: 8px 10px; flex: none; }
.day-nav .date { flex: 1 1 auto; min-width: 0; text-align: center; font-size: 16px; }
.day-nav .row { flex: none; }

/* ---------- portion screen (food detail, reference-design style) ---------- */
.pp-hero {
  margin: -16px -16px 0;
  padding: 22px 18px 30px;
  background:
    radial-gradient(320px 160px at 85% -40px, rgba(201,162,75,0.35), rgba(201,162,75,0) 70%),
    linear-gradient(150deg, #5b2310 0%, #9a3412 55%, #c2410c 100%);
  color: #fff;
  border-radius: 0 0 28px 28px;
}
.pp-back { color: rgba(255,255,255,0.85); text-decoration: none; font-size: 15px; display: inline-block; margin-bottom: 12px; }
.pp-hero h1 { color: #fff; margin: 0 0 4px; font-size: 24px; letter-spacing: -0.3px; }
.pp-hero p { color: rgba(255,255,255,0.72); margin: 0; font-size: 13px; }
.pp-qtyrow { display: flex; gap: 10px; margin: 16px 0 4px; }
.pp-field { flex: 1; display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink); }
.pp-field select {
  appearance: none; -webkit-appearance: none;
  padding: 12px 34px 12px 14px;
  border: 1px solid var(--line); border-radius: 12px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a7a6e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center/16px;
  font-size: 16px; color: var(--ink); font-weight: 600;
}
.pp-break h2 { font-size: 15px; margin: 0 0 8px; }
.pp-calrow { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.pp-bigcal { font-size: 34px; font-weight: 800; letter-spacing: -0.5px; color: var(--ink); }
.pp-bigcal small { font-size: 16px; font-weight: 600; color: var(--muted); }
.pp-pill { background: var(--brand-soft); color: var(--brand-deep); font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 999px; white-space: nowrap; }
.pp-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-top: 1px solid var(--line); }
.pp-row:first-child { border-top: 0; }
.pp-lab { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.pp-lab .nic { width: 32px; height: 32px; border-radius: 10px; }
.pp-lab .nic .ico { width: 18px; height: 18px; }
.pp-row b { font-size: 14px; }
.pp-mealrow { margin: 14px 0 4px; }
.pp-mealrow .chips { margin-top: 8px; }
.chips.slim .chip { padding: 7px 13px; font-size: 13px; }
.pp-spacer { height: 92px; }
.pp-sticky {
  position: sticky; bottom: calc(var(--tabbar-h) + 10px); z-index: 20;
  background: linear-gradient(180deg, rgba(250,247,241,0), #faf7f1 45%);
  padding: 20px 2px 4px; margin: 0 -2px;
}
.pp-delete { display: block; width: 100%; background: none; border: 0; color: #b91c1c; font-size: 14px; font-weight: 600; padding: 10px; cursor: pointer; }
/* the sticky Add button owns the bottom-right on the portion screen */
body.pp-open #coach-fab { display: none; }

/* ---------- smooth page transitions ---------- */
@keyframes viewIn {
  from { opacity: 0; transform: translateX(26px); }
  to { opacity: 1; transform: none; }
}
#view.view-enter { animation: viewIn 0.28s cubic-bezier(0.32, 0.72, 0, 1); }
@media (prefers-reduced-motion: reduce) {
  #view.view-enter { animation: none; }
  .row-enter { animation: none !important; }
}
/* staggered search-result rows */
@keyframes rowIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.row-enter { animation: rowIn 0.3s cubic-bezier(0.32, 0.72, 0, 1) backwards; }