/* app.css — เลย์เอาต์แอป (ใช้ token จาก theme.css เท่านั้น) */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--c-surface) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--c-hairline);
  min-height: 64px;
}
@media (min-width: 992px) {
  .site-header { min-height: 76px; }
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gutter);
  min-height: inherit;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--c-ink);
  font-weight: 700;
  font-size: var(--fs-title);
}
.brand img {
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
}
.brand-text { overflow-wrap: anywhere; }

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lang-switch {
  display: inline-flex;
  background: var(--c-cream);
  border-radius: var(--r-pill);
  padding: 4px;
}
.lang-btn {
  min-width: 48px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  text-decoration: none;
  color: var(--c-ink-soft);
  font-weight: 700;
}
.lang-btn.is-active {
  background: var(--c-primary);
  color: #fff;
}

.site-main {
  padding-block: 36px 72px;
  min-height: 60vh;
}

.hero-panel {
  display: grid;
  gap: 18px;
  padding: 36px 28px;
  position: relative;
  overflow: hidden;
}
@media (min-width: 992px) {
  .hero-panel { padding: 56px 48px; }
}
.hero-panel::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  right: -40px;
  bottom: -50px;
  border-radius: 50%;
  background: color-mix(in srgb, #fff 45%, transparent);
  pointer-events: none;
}
.hero-kicker { margin: 0; color: var(--c-on-light); position: relative; z-index: 1; }
.hero-panel h1 { margin: 0; color: var(--c-on-light); position: relative; z-index: 1; }
.hero-body {
  margin: 0;
  max-width: 38rem;
  color: var(--c-on-light);
  overflow-wrap: anywhere;
  position: relative;
  z-index: 1;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
  position: relative;
  z-index: 1;
}
.hero-next { color: var(--c-on-light); font-weight: 500; }

.styleguide { display: grid; gap: 24px; }
.styleguide-intro { display: grid; gap: 12px; margin-bottom: 8px; }
.styleguide .t-heading { margin-top: 16px; }

.site-footer {
  border-top: 1px solid var(--c-hairline);
  padding-block: 28px;
  background: var(--c-cream);
}
.footer-note {
  margin: 0;
  color: var(--c-muted);
  font-size: 14px;
}

.inline-form { display: inline; margin: 0; }

.auth-page, .onboarding-page { max-width: 560px; }
.auth-card, .onboarding-card { display: grid; gap: 18px; }
.auth-form { display: grid; gap: 16px; }
.auth-form label { display: grid; gap: 6px; color: var(--c-ink); font-weight: 500; }
.auth-alt { margin: 0; }
.auth-alt a { font-weight: 700; }

.flash {
  border-radius: var(--r-card);
  padding: 12px 16px;
  font-weight: 500;
}
.flash--error { background: var(--c-amber); color: var(--c-on-light); }
.flash--ok { background: var(--c-green); color: #fff; }

.progress-bar {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.progress-seg {
  background: color-mix(in srgb, #fff 55%, transparent);
  color: var(--c-ink);
  border-radius: var(--r-lg);
  padding: 10px 16px;
  font-weight: 700;
  font-size: 14px;
}
.progress-seg.is-active { background: var(--c-primary); color: #fff; }
.progress-seg.is-done { background: var(--c-btn-dark); color: #fff; }

.chip-fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; }
.chip-fieldset legend { font-weight: 500; margin-bottom: 4px; }
.chip-option { display: inline-flex; cursor: pointer; }
.chip-option input { position: absolute; opacity: 0; pointer-events: none; }
.chip-option input:checked + .chip {
  background: var(--c-btn-dark);
  color: #fff;
}
.chip-option .chip { display: inline-flex; align-items: center; }

.consent-check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-weight: 500;
  color: var(--c-ink);
}
.consent-check input { width: 24px; height: 24px; min-height: 24px; margin-top: 2px; }
.hint { margin: 0; color: var(--c-ink-soft); font-size: 14px; }

.dashboard-page { display: grid; gap: 20px; }
.dash-hero h1 { color: var(--c-on-light); margin: 0; }
.dash-hero .t-lead, .dash-hero p { color: var(--c-on-light); }
.dash-water .t-title, .dash-water p { color: var(--c-on-light); margin: 0 0 8px; }
.dash-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.alerts-stack { display: grid; gap: 12px; }
.alert-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
}
.alert-card .t-title,
.alert-card p { margin: 0; }
.alert-icon {
  width: 40px;
  height: 40px;
  margin: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c-btn-dark);
  color: #fff;
  font-weight: 700;
}
.dash-actions--in-panel { margin-top: 12px; }
.progress-fill--water { background: var(--c-btn-dark); }

.water-page { display: grid; gap: 20px; }
.water-hero { display: grid; gap: 10px; }
.water-total { margin: 0; color: var(--c-on-light); }
.water-unit { font-size: var(--fs-title); font-weight: 700; }
.water-quick { display: grid; gap: 14px; }
.water-quick-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.water-glass-btn {
  width: 72px;
  height: 72px;
  border: 0;
  border-radius: 50%;
  background: var(--c-sky);
  color: var(--c-on-light);
  font: 700 14px var(--font);
  cursor: pointer;
  box-shadow: var(--shadow-soft);
}
.water-glass-btn:focus-visible {
  outline: 3px solid var(--c-primary);
  outline-offset: 3px;
}

.exercise-page { display: grid; gap: 20px; }
.exercise-minutes { margin: 0; color: var(--c-ink); }

.progress-track {
  height: 10px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--c-ink) 12%, transparent);
  overflow: hidden;
  margin-top: 10px;
}
.progress-fill {
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--c-primary);
}
.progress-fill--protein { background: var(--c-green); }
.progress-fill--carb { background: var(--c-amber); }
.progress-fill--fat { background: var(--c-orange); }

.log-page { display: grid; gap: 20px; }
.log-hero { display: grid; gap: 10px; }
.log-date-form label { display: grid; gap: 6px; max-width: 220px; color: var(--c-ink); font-weight: 500; }
.meal-list { display: grid; gap: 12px; }
.meal-card {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.foods-page { display: grid; gap: 20px; }
.foods-hero { display: grid; gap: 8px; }
.foods-filters { display: grid; gap: 16px; }
.foods-filters label { display: grid; gap: 6px; color: var(--c-ink); font-weight: 500; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-row .chip { text-decoration: none; display: inline-flex; align-items: center; }
.foods-filter-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.foods-count { margin: 0; color: var(--c-muted); font-weight: 600; }
.foods-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .foods-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
  .foods-grid { grid-template-columns: repeat(3, 1fr); }
}
.food-card { display: grid; gap: 6px; }
.food-card .t-title { margin: 0; overflow-wrap: anywhere; }
.food-cat {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--c-primary);
  text-transform: none;
}
.food-serving, .food-price { margin: 0; color: var(--c-muted); font-size: 14px; }
.food-kcal { margin: 4px 0; color: var(--c-ink); }
.food-macros {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  color: var(--c-ink-soft);
  font-size: 13px;
}
.pager {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
}
.empty-state { display: grid; gap: 8px; }
.foods-disclaimer { margin-top: 8px; }

.bottom-nav {
  position: sticky;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: color-mix(in srgb, var(--c-surface) 92%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--c-hairline);
  padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
}
.bottom-nav__item {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--c-muted);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}
.bottom-nav__item.is-active { color: var(--c-primary); }

body.is-authed .site-footer { margin-bottom: 0; }

@media (min-width: 992px) {
  .bottom-nav { display: none; }
}

.ai-settings-page,
.ai-chat-page { display: grid; gap: 16px; }
.ai-thread {
  display: grid;
  gap: 12px;
  max-height: min(55vh, 480px);
  overflow-y: auto;
  align-content: start;
}
.ai-bubble {
  max-width: min(92%, 36rem);
  padding: 12px 16px;
  border-radius: var(--r-md);
  white-space: pre-wrap;
  word-break: break-word;
}
.ai-bubble p { margin: 0; }
.ai-bubble--user {
  justify-self: end;
  background: var(--c-sky);
  color: var(--c-on-light);
}
.ai-bubble--bot {
  justify-self: start;
  background: color-mix(in srgb, var(--c-purple) 14%, var(--c-surface));
  border: 1px solid var(--c-hairline);
}
.ai-compose { display: grid; gap: 12px; }
.ai-compose .dash-actions,
.ai-compose { align-items: start; }

.pantry-page { display: grid; gap: 16px; }
.pantry-expire-list { margin: 8px 0 0; padding-left: 1.2rem; }
.pantry-row--soon { border-color: color-mix(in srgb, var(--c-amber) 55%, var(--c-hairline)); }
.pantry-recipe { display: grid; gap: 12px; }
.recipe-grid {
  display: grid;
  gap: 12px;
}
@media (min-width: 768px) {
  .recipe-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.recipe-card ul,
.recipe-card ol { margin: 0 0 8px; padding-left: 1.2rem; }