/* Arkansas Razorbacks: Cardinal (#9D2235) and white.
   Cardinal at full strength is too dark for small text on a dark ground, so it
   carries fills and buttons (white on cardinal reads cleanly) while a brighter
   tint handles thin elements like the chart stroke and focus rings. */
:root {
  --bg: #121010;
  --surface: #1b1717;
  --surface-2: #251f20;
  --line: #3a2f31;
  --text: #f6f1f1;
  --muted: #a89b9d;
  --cardinal: #9d2235;
  --cardinal-bright: #e2566a;
  --accent: var(--cardinal);
  --danger: #ff7a7a;
  --radius: 14px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

#app {
  max-width: 34rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
}

.screen[hidden] { display: none; }

.stack { display: flex; flex-direction: column; gap: 1rem; }
.row { display: flex; gap: 0.75rem; align-items: stretch; }
.row > .field { flex: 1; }

.title {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}

.home-head { margin-bottom: 1.5rem; }

.muted {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0.25rem 0 0;
}

.footnote { margin-top: 2rem; font-size: 0.8rem; }

.error {
  color: var(--danger);
  font-size: 0.9rem;
  margin: 0;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.card-label {
  color: var(--muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 0.5rem;
  display: block;
}

.metric {
  font-size: 2.75rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.chart-wrap { margin-top: 1rem; }

#trend-chart {
  width: 100%;
  height: 80px;
  display: block;
  overflow: visible;
}

/* Touch targets sized for one-handed use on a phone. */
.field {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 1.05rem;
  padding: 0.9rem 1rem;
  width: 100%;
  min-height: 3rem;
}

.field::placeholder { color: var(--muted); }

.field:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--cardinal-bright);
  outline-offset: 1px;
}

.btn {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 600;
  padding: 0.9rem 1.4rem;
  min-height: 3rem;
  cursor: pointer;
}

.btn.primary {
  background: var(--cardinal);
  border-color: var(--cardinal);
  color: #ffffff;
}

.btn:disabled { opacity: 0.55; cursor: default; }

.weigh-in { display: flex; flex-direction: column; gap: 0.6rem; }
.weigh-in.narrow { max-width: 11rem; }

.row.between { justify-content: space-between; align-items: flex-start; }

.card.compact { padding: 1rem 1.25rem; }

/* Today card ------------------------------------------------------------- */

.macros {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 0.75rem;
  align-items: end;
}

.macro .card-label { margin-bottom: 0.35rem; }
.macro .muted { font-size: 0.78rem; }

.metric.small { font-size: 1.6rem; }
.unit { font-size: 0.9rem; font-weight: 500; color: var(--muted); margin-left: 0.1rem; }

.bar {
  margin-top: 1rem;
  height: 6px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--cardinal);
  transition: width 240ms ease;
}

.bar-fill.over { background: var(--danger); }

/* Meal feed -------------------------------------------------------------- */

.feed { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 7rem; }

.meal {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
}

.meal-head { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.meal-name { font-weight: 600; margin: 0; }
.meal-kcal { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.meal-detail { color: var(--muted); font-size: 0.85rem; margin: 0.3rem 0 0; }

.meal.pending { opacity: 0.6; }

.tag {
  display: inline-block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  margin-left: 0.4rem;
}

/* Pre-meal check-in ------------------------------------------------------ */

.precheck {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--cardinal);
  border-radius: var(--radius);
  padding: 1rem;
}

.precheck.over { border-left-color: var(--danger); }

.precheck-headline {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 0.35rem;
  line-height: 1.3;
}

.precheck-detail { color: var(--muted); font-size: 0.88rem; margin: 0 0 0.9rem; line-height: 1.45; }
.precheck-items { color: var(--muted); font-size: 0.8rem; margin: 0 0 0.9rem; }
.precheck-actions { display: flex; gap: 0.5rem; }
.precheck-actions .btn { flex: 1; padding: 0.7rem 1rem; font-size: 0.95rem; }

.ask {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--cardinal);
  border-radius: var(--radius);
  padding: 0.8rem 1rem;
  font-size: 0.9rem;
}

/* Composer --------------------------------------------------------------- */

.composer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, var(--bg) 70%, transparent);
  padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom));
}

.composer-row {
  display: flex;
  gap: 0.5rem;
  max-width: 34rem;
  margin: 0 auto;
}

.composer-row .field { flex: 1; }
.composer .error { max-width: 34rem; margin: 0 auto 0.5rem; }

.btn.icon { padding: 0.9rem 0.9rem; font-size: 1.15rem; line-height: 1; }
.btn.icon.listening { background: var(--cardinal); border-color: var(--cardinal); }