:root {
  --green: #33402c;
  --green-dark: #232d1f;
  --sage: #6b7f52;
  --tan: #c17f4e;
  --tan-light: #e3ad7e;
  --cream: #faf6f0;
  --paper: #fffdf9;
  --ink: #2a2a24;
  --line: #e7ddcf;
  --radius: 14px;
  font-size: 16px;
}

* { box-sizing: border-box; }

/* Every attempt to make #app exactly match the visible viewport height
   (position:fixed + inset:0, then 100dvh, then a JS-measured
   window.visualViewport value written into a CSS var) left an unexplained,
   growing gap of dead space at the bottom in iOS standalone (home-screen)
   mode, no matter what actually measured correct. Rather than keep fighting
   that WebKit quirk, the app no longer tries to be exactly one screen tall
   at all — it's just a normal page that scrolls natively with the document,
   the same as any other website. There's nothing left to mismeasure. */
html, body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

header.top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(18px + env(safe-area-inset-top)) 16px 12px;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}

header.top img { width: 40px; height: 40px; }
header.top h1 { font-size: 1.15rem; margin: 0; color: var(--green); }
header.top .sub { font-size: 0.8rem; color: var(--sage); margin-top: 2px; }
header.top .today-date {
  margin-left: auto;
  text-align: right;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--sage);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
  padding-left: 8px;
}

.scroll-area {
  /* the page itself scrolls now (see the #app comment above) — this is just
     a plain wrapper around <main>, kept so the swipe-between-tabs listener
     in app.js still has a stable element to bind to. */
  touch-action: pan-y;
}

/* Replaces the old fixed bottom tab bar. iOS standalone (home-screen) mode
   had a persistent, unexplained gap of dead space below a bottom-anchored
   bar that no viewport-measurement fix resolved — so instead of fighting
   that WebKit quirk, the tab switcher now lives in normal document flow
   right under the header (never anchored to the bottom of the screen), and
   switching tabs also works by swiping left/right on the content itself. */
.tab-indicator {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  padding: 8px 14px;
}

.tab-indicator button {
  flex: 1;
  background: none;
  border: none;
  color: var(--sage);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 8px 0;
  border-radius: 10px;
}

.tab-indicator button.active { color: var(--green); background: #eef1e6; }

main { padding: 12px 14px 90px; max-width: 640px; margin: 0 auto; }

.week-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.week-nav button {
  background: var(--green);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 8px 14px;
}
.week-nav .label { font-weight: 600; color: var(--green); }

.day-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
}
.day-card .day-head {
  background: var(--green);
  color: var(--cream);
  padding: 8px 14px;
  font-weight: 600;
  font-size: 0.9rem;
  display: flex;
  justify-content: space-between;
}
.meal-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
}
.meal-row .meal-label {
  width: 78px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sage);
  font-weight: 700;
}
.meal-row .meal-body { flex: 1; min-width: 0; }
.meal-row .meal-title { font-weight: 600; }
.meal-row .meal-empty { color: #a9a397; font-style: italic; font-size: 0.9rem; }
.meal-row .meal-meta { font-size: 0.78rem; color: #8a8578; margin-top: 2px; }
.meal-row button.edit {
  background: var(--tan-light);
  color: var(--green-dark);
  border: none;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.8rem;
  font-weight: 600;
}

.fab {
  position: fixed;
  right: 18px;
  bottom: calc(22px + env(safe-area-inset-bottom));
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--tan);
  color: white;
  border: none;
  font-size: 1.5rem;
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
  z-index: 8;
}
.fab.recording { background: #b23b3b; animation: pulse 1.1s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(178,59,59,0.5);} 70% { box-shadow: 0 0 0 14px rgba(178,59,59,0);} 100% { box-shadow: 0 0 0 0 rgba(178,59,59,0);} }

.sheet-backdrop {
  position: fixed; inset: 0;
  background: rgba(30,26,20,0.4);
  z-index: 20;
  display: flex; align-items: flex-end;
}
.sheet {
  background: var(--paper);
  width: 100%;
  border-radius: 20px 20px 0 0;
  padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
  max-height: 88vh;
  overflow-y: auto;
}
.sheet h2 { margin-top: 0; color: var(--green); font-size: 1.1rem; }
.sheet label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--sage);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 14px 0 4px;
}
.sheet input[type=text], .sheet textarea, .sheet select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  font-size: 1rem;
  font-family: inherit;
  background: var(--cream);
}
.sheet textarea { min-height: 90px; resize: vertical; }
.ingredient-list { list-style: none; padding: 0; margin: 6px 0; }
.ingredient-list li { display: flex; gap: 6px; margin-bottom: 6px; }
.ingredient-list input { flex: 1; }
.ingredient-list button { background: none; border: none; color: #b23b3b; font-size: 1.1rem; }
.btn-row { display: flex; gap: 10px; margin-top: 16px; }
.btn {
  flex: 1;
  border: none;
  border-radius: 10px;
  padding: 12px;
  font-weight: 600;
  font-size: 0.95rem;
}
.btn.primary { background: var(--green); color: white; }
.btn.secondary { background: #eef1e6; color: var(--green); }
.btn.ghost { background: none; color: var(--sage); }
.btn.danger { background: #f3e2e2; color: #a13d3d; }
.btn.mic { background: var(--tan); color: white; }
.btn.mic.recording { background: #b23b3b; }
.btn:disabled { opacity: 0.5; }

.voice-status { font-size: 0.85rem; color: var(--sage); margin-top: 8px; min-height: 1.2em; }

.history-day { margin-bottom: 22px; }
.history-day h3 { color: var(--green); font-size: 0.95rem; margin-bottom: 8px; }
.log-card {
  display: flex;
  gap: 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
  margin-bottom: 10px;
}
.log-card img { width: 76px; height: 76px; object-fit: cover; border-radius: 10px; background: var(--line); }
.log-card .log-body { flex: 1; min-width: 0; }
.log-card .log-title { font-weight: 700; color: var(--green); }
.log-card .log-meta { font-size: 0.75rem; color: var(--sage); text-transform: uppercase; letter-spacing: 0.03em; }
.log-card .log-comment { font-size: 0.9rem; margin-top: 4px; color: var(--ink); }
.log-card .log-cal { font-size: 0.78rem; color: #8a8578; margin-top: 4px; }

.empty-state { text-align: center; color: #a9a397; padding: 40px 20px; font-style: italic; }

.photo-picker {
  display: flex; align-items: center; gap: 12px; margin-top: 6px;
}
.photo-picker img.preview { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }
.toast {
  position: fixed;
  top: 14px; left: 50%; transform: translateX(-50%);
  background: var(--green);
  color: var(--cream);
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 0.9rem;
  z-index: 50;
}