/*
 * assets/styles.css
 * Mobile-first, portrait UI for Prismeal. Single stylesheet (no framework).
 * Brand: fresh green. Safe-area aware for iOS notch / home indicator.
 */

:root {
  --green:        #16a34a;
  --green-dark:   #14532d;
  --green-600:    #15803d;
  --green-50:     #f0fdf4;
  --green-100:    #dcfce7;
  --green-200:    #bbf7d0;
  --ink:          #14201a;
  --muted:        #5b6b62;
  --line:         #e3ebe5;
  --bg:           #f7faf8;
  --card:         #ffffff;
  --radius:       16px;
  --radius-sm:    12px;
  --shadow:       0 2px 10px rgba(20, 50, 35, 0.06);
  --shadow-lg:    0 8px 28px rgba(20, 50, 35, 0.12);
  --maxw:         480px;

  /* ── Prism accent palette (visual-polish pass) ──────────────────────────────
     Gold: the second prism anchor (deep green + gold) — used sparingly, for the
     Pro badge only, so it stays a signal rather than decoration.
     Spectrum: the four dispersion tones from the parked brand direction (teal →
     green → amber → coral), reused here as a small per-module accent on the
     Coaching tab's featured cards — not a rebrand, just a palette already chosen. */
  --gold:         #b8860b;
  --gold-ink:     #7a5c12;
  --gold-bg:      #fdf3dd;
  --gold-line:    #e9cd8a;
  --spectrum-1:   #1c9a93;   /* teal   */
  --spectrum-2:   #3fa87a;   /* green  */
  --spectrum-3:   #d1932a;   /* amber  */
  --spectrum-4:   #d97a56;   /* coral  */
  /* Evidence-badge tones beyond strong/moderate — distinct hues, same light-bg/
     dark-ink pattern, so the whole set reads as one harmonised system. */
  /* The evidence ramp is ORDERED: strong → moderate_high → moderate → low_moderate. Each tier
     gets its own step so no two tiers ever render identically — a reader must be able to see
     that "moderate–strong" is not "moderate", and that "low–moderate" is not "moderate". */
  --ev-moderate-high-bg:  #e6f0d3;
  --ev-moderate-high-ink: #4f6b17;
  --ev-low-moderate-bg:   #fdf4e0;
  --ev-low-moderate-ink:  #8a6a1d;
  --ev-emerging-bg:  #e5e9fb;
  --ev-emerging-ink: #3b3f8f;
  --ev-cautious-bg:  #ffe8d6;
  --ev-cautious-ink: #9a4a1f;
  --ev-promising-bg: #d3f5ef;
  --ev-promising-ink: #0f6d63;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

.app-root {
  max-width: var(--maxw);
  margin: 0 auto;
  min-height: 100%;
  position: relative;
  background: var(--bg);
}

/* ── Shell: header + main + bottom tab bar ───────────────────────────────── */
.shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
.appbar {
  position: sticky; top: 0; z-index: 5;
  padding: calc(env(safe-area-inset-top) + 12px) 20px 12px;
  background: rgba(247, 250, 248, 0.9);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--line);
}
/* Brand mark: the prism icon + the app-name string (i18n `app_name` — never hard-coded),
   small and clean, on every screen that carries the shared header. */
.appbar__brand { display: flex; align-items: center; gap: 8px; }
.appbar__mark { width: 24px; height: 24px; border-radius: 7px; flex: none; display: block; box-shadow: var(--shadow); }
.appbar__title { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.shell__main { flex: 1 1 auto; padding-bottom: 12px; }

.tabbar {
  position: sticky; bottom: 0; z-index: 5;
  display: grid; grid-template-columns: repeat(4, 1fr);   /* Home · Diary · Coaching · Settings */
  background: var(--card);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tab {
  appearance: none; border: 0; background: none;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 0 8px; color: var(--muted); font-size: 11px; font-weight: 600;
  cursor: pointer;
}
.tab--on { color: var(--green-600); }
.tab__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 26px; border-radius: 10px; transition: background 0.15s ease;
}
.tab--on .tab__icon { background: var(--green-50); }

/* ── Screens ──────────────────────────────────────────────────────────────── */
.screen {
  padding: 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.screen.onb {
  min-height: 100vh; min-height: 100dvh;
  padding: calc(env(safe-area-inset-top) + 28px) 24px calc(env(safe-area-inset-bottom) + 24px);
}
.onb--center { justify-content: center; text-align: center; align-items: center; }

.h1 { font-size: 24px; line-height: 1.2; font-weight: 800; letter-spacing: -0.01em; }
.eyebrow { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--green-600); }
.muted { color: var(--muted); font-size: 15px; line-height: 1.5; }
.muted--center { text-align: center; }
.spacer { flex: 1 1 auto; min-height: 8px; }
.row { display: flex; }
.row--gap { gap: 12px; }
.row .btn { flex: 1; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
  appearance: none; border: 0; cursor: pointer;
  font-size: 16px; font-weight: 700; line-height: 1;
  padding: 15px 18px; border-radius: var(--radius-sm);
  transition: transform 0.05s ease, background 0.15s ease, opacity 0.15s ease;
}
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn--block { width: 100%; }
.btn--primary { background: var(--green); color: #fff; box-shadow: var(--shadow); }
.btn--primary:active { background: var(--green-600); }
.btn--ghost { background: var(--card); color: var(--ink); border: 1px solid var(--line); }
/* Subtle text link (e.g. "Discard analysis") — no fill, muted, underlined on press. */
.btn--link { background: none; color: var(--muted); box-shadow: none; font-weight: 600; font-size: 15px; padding: 10px 12px; }
.btn--link:active { background: none; text-decoration: underline; transform: none; }
.row--center { justify-content: center; }
.row--center .btn { flex: 0 0 auto; }
.discard-row { margin-top: 4px; }

/* ── Onboarding ───────────────────────────────────────────────────────────── */
.onb__hero { margin-bottom: 6px; }
.onb__logo {
  width: 112px; height: 112px; border-radius: 28px;
  background: linear-gradient(160deg, var(--green), var(--green-600));
  display: grid; place-items: center; margin: 0 auto;
  box-shadow: var(--shadow-lg);
}
/* When .onb__logo is the real app-icon <img> (brandLogo()): it carries its own artwork/background,
   so drop the placeholder gradient and let it fill the tile; border-radius clips to iOS-rounded. */
img.onb__logo { object-fit: cover; background: none; display: block; }

.cards { display: flex; flex-direction: column; gap: 12px; }
.card-select {
  appearance: none; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 4px;
  background: var(--card); border: 2px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px;
}
.card-select--on { border-color: var(--green); background: var(--green-50); }
.card-select__title { font-size: 17px; font-weight: 700; }
.card-select__desc  { font-size: 14px; color: var(--muted); }

.callout {
  background: var(--green-50); border: 1px solid var(--green-100);
  border-radius: var(--radius); padding: 14px 16px;
  font-size: 14px; line-height: 1.5; color: var(--green-dark);
  display: flex; flex-direction: column; gap: 8px;
}
.callout__why { color: var(--green-600); font-size: 13px; }

.cal__preview {
  border-radius: var(--radius); overflow: hidden;
  background: var(--card); border: 1px dashed var(--line);
  aspect-ratio: 4 / 3; display: grid; place-items: center;
}
.cal__preview--empty { color: var(--muted); }
.cal__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cal__hint { font-size: 14px; }
.cal__preview--sm { max-width: 72%; margin: 0 auto; }
.calib--center { align-items: center; justify-content: center; text-align: center; gap: 16px; }
.calib--center .cal__preview { width: 60%; }

/* ── Home ─────────────────────────────────────────────────────────────────── */
.home { gap: 16px; }
.home__top { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.tile {
  appearance: none; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 16px;
  border: 0; border-radius: var(--radius); padding: 22px 20px;
  font-size: 18px; font-weight: 700;
}
.tile--primary { background: linear-gradient(160deg, var(--green), var(--green-600)); color: #fff; box-shadow: var(--shadow-lg); }
.tile--ghost   { background: var(--card); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow); }
.tile__icon { display: inline-flex; opacity: 0.95; }
.tile--primary .tile__icon { color: #fff; }
.tile--ghost   .tile__icon { color: var(--green-600); }

/* ── Capture ──────────────────────────────────────────────────────────────── */
.capture__frame {
  border-radius: var(--radius); overflow: hidden; background: #000;
  aspect-ratio: 3 / 4; box-shadow: var(--shadow);
}
.capture__img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Source chooser (bottom sheet) ────────────────────────────────────────── */
.chooser {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(20, 32, 26, 0.45);
  display: flex; align-items: flex-end; justify-content: center;
}
.chooser__sheet {
  width: 100%; max-width: var(--maxw);
  background: var(--card);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 20px 20px calc(env(safe-area-inset-bottom) + 20px);
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: var(--shadow-lg);
}
.chooser__title { font-size: 17px; font-weight: 800; text-align: center; margin-bottom: 4px; }

/* ── Live webcam modal (web fallback) ─────────────────────────────────────── */
.cam {
  position: fixed; inset: 0; z-index: 50;
  background: #000; display: flex; flex-direction: column;
}
.cam__frame { flex: 1; display: grid; place-items: center; overflow: hidden; }
.cam__frame video { width: 100%; height: 100%; object-fit: cover; }
.cam__bar {
  display: flex; gap: 12px; padding: 16px 20px calc(env(safe-area-inset-bottom) + 16px);
  background: #000;
}
.cam__bar .btn { flex: 1; }
.cam__shoot { flex: 2; }

/* ── Diary ────────────────────────────────────────────────────────────────── */
.diary__list { display: flex; flex-direction: column; gap: 10px; }
.diary__dayhdr {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 6px 4px 2px; margin-top: 4px; background: none; border: none; cursor: pointer;
  color: var(--muted); font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: 0.03em;
}
.diary__dayhdr-ic { color: var(--muted); opacity: 0.7; }
.diary__row {
  display: flex; align-items: center; gap: 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px; box-shadow: var(--shadow);
}
.diary__thumb {
  width: 64px; height: 64px; border-radius: var(--radius-sm); overflow: hidden;
  background: var(--green-100); flex: 0 0 auto;
}
.diary__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.diary__meta { display: flex; flex-direction: column; gap: 6px; }
.diary__time { font-size: 15px; font-weight: 700; }
.empty { padding: 40px 12px; }
/* Empty states, unified (visual-polish pass): every "nothing here yet" line across the app —
   diary, Today, Progress, the Weekly Audit, the weight log — gets the same quiet, centered
   treatment instead of each screen inventing its own left-aligned paragraph. */
.today__empty, .progress__empty, .audit__empty, .weight__empty {
  text-align: center; padding: 22px 16px; font-size: 14px;
}

.pill {
  align-self: flex-start; font-size: 12px; font-weight: 700;
  padding: 3px 10px; border-radius: 999px;
  background: var(--green-100); color: var(--green-dark);
}
.pill--analyzing { background: #fef9c3; color: #854d0e; }
.pill--done { background: var(--green); color: #fff; }

/* ── Settings ─────────────────────────────────────────────────────────────── */
.setting {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px;
}
.setting__label { font-weight: 600; }
.setting__value { color: var(--muted); font-weight: 600; }
.seg { display: inline-flex; background: var(--green-50); border-radius: 999px; padding: 3px; }
.seg__btn {
  appearance: none; border: 0; background: none; cursor: pointer;
  font-size: 13px; font-weight: 700; color: var(--muted);
  padding: 7px 14px; border-radius: 999px;
}
.seg__btn--on { background: var(--green); color: #fff; }

/* ── Analysis: loading ────────────────────────────────────────────────────── */
.capture--center { align-items: center; justify-content: center; text-align: center; gap: 18px; }
.capture__frame--sm { width: 60%; aspect-ratio: 1 / 1; }
.spinner {
  width: 42px; height: 42px; border-radius: 50%;
  border: 4px solid var(--green-100); border-top-color: var(--green);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.h2 { font-size: 16px; font-weight: 800; margin-top: 4px; }
.disclaimer { font-size: 12px; color: var(--muted); line-height: 1.45; }
.coach {
  background: var(--green-50); border: 1px solid var(--green-100); border-radius: var(--radius);
  padding: 14px 16px; font-size: 15px; line-height: 1.5; color: var(--green-dark); font-weight: 600;
}

/* ── Module coaching cards — ONE shared pattern across GLP-1 (§5), M-2 glycemic, M-3 gut, M-6 aging.
   Previously only .glp1coach* carried any CSS; .glycoach*/.gutcoach*/.agingcoach* rendered as
   unstyled plain text (visual-polish pass). The grade badge on each now paints via the shared
   .evbadge system (see below) — this block is only the surrounding card + text treatment. ───────── */
.glp1coach, .glycoach, .gutcoach, .agingcoach { display: flex; flex-direction: column; gap: 10px; margin: 12px 0 4px; }
.glp1coach__head, .glycoach__head, .gutcoach__head, .agingcoach__head { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin: 0; }
.glp1coach__item, .glycoach__item, .gutcoach__item, .agingcoach__item {
  background: var(--green-50); border: 1px solid var(--green-100); border-radius: var(--radius);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 8px;
}
.glp1coach__text, .glycoach__text, .gutcoach__text, .agingcoach__text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--green-dark); }
/* The evbadge pill is a flex CHILD of a column-direction card above, so pin it to its own width
   (else flex stretch would fill the row) — the color/shape come from .evbadge/.evbadge--*. */
.glp1coach__grade, .glycoach__grade, .gutcoach__grade, .agingcoach__grade { align-self: flex-start; }
.glp1coach__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.glp1coach__chip { font-size: 13px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); }
.glp1coach__indicator { margin-top: 8px; }

/* ── Metabolic Integrity Score card ───────────────────────────────────────── */
.score { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 14px; }
.score__head { display: flex; align-items: center; gap: 16px; }
.score__ring {
  width: 78px; height: 78px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; color: #fff;
  background: var(--green); box-shadow: var(--shadow);
}
.score__ring[data-band="good"] { background: var(--green); }
.score__ring[data-band="ok"]   { background: #d97706; }
.score__ring[data-band="low"]  { background: #dc2626; }
.score__num { font-size: 28px; font-weight: 800; line-height: 1; }
.score__den { font-size: 11px; opacity: 0.85; }
.score__title { display: flex; flex-direction: column; gap: 3px; }

.score__parts { display: flex; flex-direction: column; gap: 9px; }
.part { display: grid; grid-template-columns: 96px 1fr 42px; align-items: center; gap: 10px; }
.part__label { font-size: 13px; color: var(--ink); }
.part__bar { height: 8px; background: var(--green-100); border-radius: 999px; overflow: hidden; }
.part__fill { display: block; height: 100%; background: var(--green); border-radius: 999px; }
.part__val { font-size: 12px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }

/* ── Item cards ───────────────────────────────────────────────────────────── */
.items { display: flex; flex-direction: column; gap: 10px; }
.item { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 6px; }
.item__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.item__name { font-size: 16px; font-weight: 700; }
.item__est { font-size: 14px; color: var(--green-600); font-weight: 600; }
.item__assume { font-size: 13px; color: var(--muted); }
.item__edit { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.item__edit .muted { font-size: 13px; }
.item__grams {
  width: 88px; font-size: 16px; font-weight: 700; text-align: right;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg);
}
.item__unit { font-size: 14px; color: var(--muted); }
/* Marks a portion the participant STATED (their number outranks the model's estimate). */
.item__confirmed {
  font-size: 12px; font-weight: 600; color: var(--green-600);
  border: 1px solid var(--green-600); border-radius: 999px; padding: 2px 8px; margin-left: auto;
}
.item__confirmed[hidden] { display: none; }

.nova { font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.nova--1 { background: #dcfce7; color: #166534; }
.nova--2 { background: #d1fae5; color: #115e59; }
.nova--3 { background: #fef3c7; color: #854d0e; }
.nova--4 { background: #fee2e2; color: #991b1b; }

/* ── Totals ───────────────────────────────────────────────────────────────── */
.totals { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; }
.totals__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.totals__cell { display: flex; flex-direction: column; gap: 2px; }
.totals__label { font-size: 11px; color: var(--muted); }
.totals__val { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.totals__note { font-size: 13px; color: var(--muted); }

/* ── Clarifying questions ─────────────────────────────────────────────────── */
.qs { display: flex; flex-direction: column; gap: 12px; }
.q { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; }
.q__text { font-size: 15px; font-weight: 600; }
.q__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { appearance: none; border: 1px solid var(--line); background: var(--bg); cursor: pointer; font-size: 13px; font-weight: 700; color: var(--ink); padding: 7px 14px; border-radius: 999px; }
.chip--on { background: var(--green); color: #fff; border-color: var(--green); }
.q__input { font-size: 15px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }

/* ── Result: photo header + free-text note ────────────────────────────────── */
.result__hero {
  border-radius: var(--radius); overflow: hidden; background: var(--green-100);
  max-height: 220px; box-shadow: var(--shadow);
}
.result__heroimg { width: 100%; max-height: 220px; object-fit: cover; display: block; }
/* Text-only meal (backlog #2): no photo — show the typed description / a placeholder. */
.result__hero--text {
  display: flex; gap: 12px; align-items: flex-start; max-height: none;
  background: var(--green-50); border: 1px solid var(--green-100); padding: 14px 16px;
}
.result__hero-ic { flex: none; color: var(--green-600); display: inline-flex; }
.result__hero-desc { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink); white-space: pre-wrap; }
.capture__frame--text {
  aspect-ratio: auto; display: flex; gap: 10px; align-items: flex-start; text-align: left;
  padding: 12px 14px; background: var(--green-50); border: 1px solid var(--green-100);
}
.capture__desc-ic { flex: none; color: var(--green-600); display: inline-flex; }
.capture__desc { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink); white-space: pre-wrap; }
.describe__caveat { font-size: 13px; }

/* §7 voice dictation button on the describe screen (native only). */
.describe__note { position: relative; }
.describe__mic {
  align-self: flex-end; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; margin-top: 6px; border-radius: 50%;
  border: 1px solid var(--line); color: var(--green-600); background: var(--bg);
}
.describe__mic--on {
  color: #fff; background: var(--green-600); border-color: var(--green-600);
  animation: mic-pulse 1.4s ease-in-out infinite;
}
@keyframes mic-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(22,163,74,0.45); } 50% { box-shadow: 0 0 0 8px rgba(22,163,74,0); } }
@media (prefers-reduced-motion: reduce) { .describe__mic--on { animation: none; } }
.diary__thumb--empty, .detail__photo--empty { display: grid; place-items: center; color: var(--green-600); }
.diary__thumb-ic { display: inline-flex; }
.detail__photo-ic { display: inline-flex; transform: scale(1.8); color: var(--green-600); }
.detail__desc { display: flex; flex-direction: column; gap: 4px; }
.detail__desc-text { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink); white-space: pre-wrap; }
.note { display: flex; flex-direction: column; gap: 6px; }
.note__label { font-size: 14px; font-weight: 700; }

/* §4 "Eaten at" row on the result card — compact editable meal time. */
.eatenat { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0; }
.eatenat__label { font-size: 14px; font-weight: 700; white-space: nowrap; }
.eatenat__input { font: inherit; font-size: 15px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.note__input {
  font: inherit; font-size: 15px; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--bg); resize: vertical; min-height: 56px; width: 100%;
}

/* ── Calibration: edit measured width + Settings actions ──────────────────── */
/* Settings: stacked rows (label above content), e.g. the editable Focus picker. */
.setting--stack { flex-direction: column; align-items: stretch; gap: 10px; }
.cards--compact .card-select { padding: 12px 14px; }
.setting--btn { appearance: none; cursor: pointer; text-align: left; width: 100%; }

/* Profile form */
.screen.profile { gap: 12px; }
.profile__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.profile__row--stack { flex-direction: column; align-items: stretch; gap: 6px; }
.profile__label { font-weight: 600; font-size: 15px; }
.profile__row .field { width: 130px; text-align: right; }
.profile__row--stack .field { width: 100%; text-align: left; }
.seg--wrap { flex-wrap: wrap; }
.seg__btn--disabled { opacity: 0.4; cursor: default; }
.profile__target { margin-top: 4px; }
.profile__note { font-size: 13px; min-height: 16px; }

/* Weekly Mentor Audit */
.audit__headline { font-size: 18px; font-weight: 800; line-height: 1.3; color: var(--green-dark); }
.audit__patterns { display: flex; flex-direction: column; gap: 10px; }
.audit__pattern { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; box-shadow: var(--shadow); }
.audit__obs { font-weight: 700; font-size: 15px; }
.audit__hyp { color: var(--muted); font-size: 14px; line-height: 1.45; }
.audit__guidance { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.audit__experiment { gap: 4px; }
.audit__when { font-size: 12px; }

.cal__editrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cal__width { width: 110px; text-align: right; font-weight: 700; }
.setting__actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }

/* ── Diary score badge + summary ──────────────────────────────────────────── */
.diary__summary { font-size: 13px; color: var(--muted); }
.diary__del {
  appearance: none; border: 0; background: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 999px; flex: 0 0 auto;
  color: var(--muted);
}
.diary__del:hover, .diary__del:active { color: #dc2626; background: #fee2e2; }
.diary__score { margin-left: auto; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; min-width: 44px; color: #fff; border-radius: var(--radius-sm); padding: 6px 8px; }
.diary__score[data-band="good"] { background: var(--green); }
.diary__score[data-band="ok"]   { background: #d97706; }
.diary__score[data-band="low"]  { background: #dc2626; }
.diary__score-num { font-size: 20px; font-weight: 800; line-height: 1; }
.diary__score-cap { font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.9; }

/* ── Clarifying questions: hint + "Update analysis" ───────────────────────── */
.q-hint { font-size: 13px; margin-top: -6px; }
.update {
  /* Hidden until the user changes an answer or a gram value (disabled state). */
  margin-top: 2px;
}
.update:disabled { display: none; }

/* ── Diary: tappable rows ─────────────────────────────────────────────────── */
.diary__row--tap { cursor: pointer; text-align: left; width: 100%; appearance: none; }
.diary__row--tap:active { transform: scale(0.995); }
.diary__chev { display: inline-flex; color: var(--muted); margin-left: 4px; flex: 0 0 auto; }
.diary__meta { min-width: 0; }
.diary__summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* ── Meal detail view ─────────────────────────────────────────────────────── */
.detailbar { display: flex; align-items: center; justify-content: space-between; }
.linkbtn {
  appearance: none; border: 0; background: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 15px; font-weight: 700; color: var(--green-600); padding: 6px 2px;
}
.linkbtn__ic { display: inline-flex; }
.linkbtn--danger { color: #dc2626; }
/* A spent control reads as spent — the check-in disables both answers on the first tap so a second
   one cannot fire (and so the tap is visibly acknowledged before the state catches up). */
.linkbtn:disabled { opacity: 0.45; cursor: default; }
.detail__photo {
  border-radius: var(--radius); overflow: hidden; background: var(--green-100);
  aspect-ratio: 4 / 3; box-shadow: var(--shadow);
}
.detail__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.detail__time { font-size: 13px; }
.detail__timerow { display: flex; flex-direction: column; gap: 8px; }
.detail__timerow > .detail__time + .detail__edit-time { align-self: flex-start; }
.detail__edit-time { padding: 2px 2px; font-size: 14px; }
.detail__time-edit { display: flex; flex-direction: column; gap: 4px; }
.detail__time-label { font-size: 13px; font-weight: 700; color: var(--muted); }
.detail__time-input { max-width: 260px; }
.detail__time-note { font-size: 13px; }
.detail__time-actions { max-width: 260px; }
.item--ro .item__est { color: var(--ink); font-weight: 600; }

.qa-list { display: flex; flex-direction: column; gap: 10px; }
.qa {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 4px;
}
.qa__q { font-size: 14px; font-weight: 700; }
.qa__a { font-size: 15px; color: var(--green-dark); }
.qa__a--none { color: var(--muted); font-style: italic; font-weight: 400; }

/* ── Toast ────────────────────────────────────────────────────────────────── */
#toast-host {
  position: fixed; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 84px);
  z-index: 60; display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none;
}
.toast {
  background: var(--ink); color: #fff; font-size: 14px; font-weight: 600;
  padding: 11px 18px; border-radius: 999px; box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(8px); transition: opacity 0.25s ease, transform 0.25s ease;
  max-width: 90%;
}
.toast--show { opacity: 1; transform: translateY(0); }

/* ── Accounts & auth (Stage 3) ──────────────────────────────────────────────── */
.auth__form { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.field {
  appearance: none; width: 100%; box-sizing: border-box;
  font-size: 16px; padding: 14px 14px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--card); color: var(--ink);
}
.field:focus { outline: none; border-color: var(--green); }
.auth__error { color: #dc2626; font-size: 14px; min-height: 18px; margin: 2px 2px 0; }
.auth__info { color: var(--green-600); font-size: 14px; margin: 2px 2px 0; }
.auth__forgot { align-self: flex-end; margin-top: -2px; font-size: 14px; }
.auth__toggle { align-self: center; margin-top: 2px; }
.auth__divider {
  display: flex; align-items: center; text-align: center;
  color: var(--muted); font-size: 13px; margin: 16px 0 12px;
}
.auth__divider::before, .auth__divider::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}
.auth__divider span { padding: 0 12px; }
.auth__note { font-size: 13px; text-align: center; margin-top: 10px; }
.auth__back { align-self: flex-start; margin-bottom: 4px; }

/* Account row in Settings */
.setting--account { align-items: center; }
.setting__col { display: flex; flex-direction: column; gap: 2px; }
.setting__col--row { flex-direction: row; align-items: center; gap: 8px; }
/* §4.2 quiet screening marker on the Settings → Support row — small, non-naming, never clinical. */
.setting__marker { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: none; opacity: 0.8; }
.setting__hint { color: var(--green-600); font-size: 12px; font-weight: 600; }
/* §4.2 persistent quiet indicator (Today + Home) — one muted line while screening is active.
   Given the same quiet card language as the rest of the pass (thin left rule + soft background),
   NOT a warning colour — it must stay non-alarming and name no state (R2). */
.quiet-indicator {
  font-size: 13px; line-height: 1.45; margin: 4px 0 2px;
  padding: 8px 12px; background: var(--bg); border-left: 3px solid var(--line); border-radius: 8px;
}
/* Renal gate (RENAL_SAFETY_SPEC §6) — the protein-row note + the four-item screen. */
.renal-note { font-size: 13px; line-height: 1.45; margin: 4px 0 2px; display: block; }
.renal-note--btn { background: none; border: none; text-align: left; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.renal__card { max-width: 520px; }
.renal__title { font-size: 17px; font-weight: 700; margin: 0 0 8px; }
.renal__items { display: flex; flex-direction: column; gap: 14px; margin: 12px 0 16px; }
.renal__q { font-size: 15px; line-height: 1.4; margin: 0 0 8px; }
.renal__opts { display: flex; gap: 8px; flex-wrap: wrap; }
.renal__opt { flex: 1 1 auto; padding: 9px 12px; font-size: 14px; border: 1px solid var(--line, #d9d9d9); border-radius: 10px; background: var(--card, #fff); cursor: pointer; }
.renal__opt--on { border-color: var(--green, #2e7d32); background: var(--green-50, #eaf5ea); color: var(--green-dark, #1b5e20); font-weight: 700; }
.renal__decline { margin-bottom: 8px; }
.btn--sm { padding: 9px 14px; font-size: 14px; border-radius: 10px; }

/* ── Lens explainers (Stage 4.5) ────────────────────────────────────────────── */
.screen.explainer { gap: 12px; }
.lens-opt { display: flex; flex-direction: column; gap: 2px; }
.lens-opt__learn { align-self: flex-start; padding: 4px 2px; font-size: 14px; }
.explainer__lenses { margin: 4px 0 2px; }
.explainer__section {
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted); margin-top: 8px;
}
.explainer__optimises { font-size: 15px; line-height: 1.5; color: var(--ink); }
.explainer__safety { font-size: 14px; }
.explainer__factors { display: flex; flex-direction: column; gap: 10px; }
.explainer__factor {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 6px;
}
.explainer__factor-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.explainer__factor-name { font-size: 16px; font-weight: 700; }
.explainer__factor-note { font-size: 14px; line-height: 1.5; color: var(--muted); }
.explainer__disclaimer { font-size: 13px; margin-top: 6px; }
/* Evidence badges — strength of research behind a factor, not a verdict on the meal. */
.evbadge {
  flex: none; font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.evbadge--strong        { background: var(--green-100); color: var(--green-dark); }
.evbadge--moderate-high { background: var(--ev-moderate-high-bg); color: var(--ev-moderate-high-ink); }
.evbadge--moderate      { background: #fef3c7; color: #854d0e; }
.evbadge--low-moderate  { background: var(--ev-low-moderate-bg);  color: var(--ev-low-moderate-ink); }
/* Emerging/cautious/promising all mean "lower confidence", but for different reasons — kept
   visually DISTINCT (not one generic "weak" red) so a reader can tell which kind of caveat this is,
   while staying HARMONISED with strong/moderate: same light-bg/dark-ink pill, same weight. None of
   these read as a danger colour — that's reserved for NOVA-4 / low score bands elsewhere. */
.evbadge--emerging  { background: var(--ev-emerging-bg);  color: var(--ev-emerging-ink); }
.evbadge--cautious  { background: var(--ev-cautious-bg);  color: var(--ev-cautious-ink); }
.evbadge--promising { background: var(--ev-promising-bg); color: var(--ev-promising-ink); }

/* Backfill nudge actions. Had no rule at all, so the primary button and the two link-buttons ran
   together into one unreadable string on Home. Wraps, because the three labels are translated. */
.backfill__actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px 16px; margin-top: 10px;
}

/* ── Post-meal check-ins + follow-ups (Stage 5) ─────────────────────────────── */
.home__checkins { display: flex; flex-direction: column; gap: 10px; }
.home__checkins:empty { display: none; }
.home__checkins-title { font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-top: 2px; }
.checkin {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px;
}
.checkin__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.checkin__time { font-size: 13px; font-weight: 700; }
.checkin__items { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.checkin__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.checkin__chip { display: inline-flex; align-items: center; gap: 6px; }
.checkin__chip--due { border-color: var(--green); background: var(--green-50); color: var(--green-dark); }
.checkin__chiptime { font-size: 11px; font-weight: 700; color: var(--muted); }
.checkin__chip--due .checkin__chiptime { color: var(--green-600); }

.screen.followup { gap: 12px; }
.followup__meal {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--green-50); border: 1px solid var(--green-100); border-radius: var(--radius-sm); padding: 10px 12px;
}
.followup__mealtime { font-size: 13px; font-weight: 700; color: var(--green-dark); }
.followup__mealitems { font-size: 13px; color: var(--green-600); }
.followup__label { font-size: 15px; font-weight: 700; }
.followup__choices { margin-top: 2px; }
.followup__note { font-size: 13px; }
.followup__slider { display: flex; flex-direction: column; gap: 6px; }
.followup__sliderhead { display: flex; align-items: baseline; justify-content: space-between; }
.followup__rangeval { font-size: 13px; font-weight: 700; color: var(--green-600); }
.followup__range { width: 100%; accent-color: var(--green); }
.followup__ends { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }

/* Settings switch (Stage 5) */
.switch {
  appearance: none; cursor: pointer; flex: none; width: 48px; height: 28px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--line); position: relative; transition: background 0.18s ease;
}
.switch--on { background: var(--green); border-color: var(--green); }
.switch__knob {
  position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow); transition: left 0.18s ease;
}
.switch--on .switch__knob { left: 22px; }
.setting__hint--muted { color: var(--muted); font-weight: 500; }

/* ── Subscriptions / paywall (Stage 6) ──────────────────────────────────────── */
.screen.paywall { gap: 12px; }
.paywall__billing { align-self: center; }
.paywall__tiers { display: flex; flex-direction: column; gap: 12px; }
.paywall__tier {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px;
}
.paywall__tier--on { border-color: var(--green); background: var(--green-50); }
.paywall__tierhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.paywall__tiername { font-size: 18px; font-weight: 800; }
.paywall__badge {
  font-size: 11px; font-weight: 800; letter-spacing: 0.02em; color: #854d0e;
  background: #fef3c7; border-radius: 999px; padding: 3px 9px; white-space: nowrap;
}
.paywall__price { display: flex; align-items: baseline; gap: 4px; }
.paywall__priceval { font-size: 22px; font-weight: 800; color: var(--green-dark); }
.paywall__priceper { font-size: 13px; color: var(--muted); font-weight: 600; }
.paywall__price--empty { font-size: 14px; color: var(--muted); font-weight: 600; }
.paywall__feats { list-style: none; display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; }
.paywall__feats li { position: relative; padding-left: 22px; font-size: 14px; line-height: 1.4; }
.paywall__feats li::before {
  content: ""; position: absolute; left: 2px; top: 4px; width: 12px; height: 7px;
  border-left: 2px solid var(--green); border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}
.paywall__cta { display: flex; flex-direction: column; gap: 4px; }
.paywall__current { text-align: center; font-weight: 700; color: var(--green-600); padding: 6px; }
.paywall__current--inc { color: var(--muted); font-weight: 600; }
.paywall__soon { text-align: center; font-size: 12px; }
.paywall__legal { text-align: center; font-size: 13px; display: flex; justify-content: center; align-items: center; gap: 2px; }
.paywall__link { padding: 4px 2px; font-size: 13px; }

/* Soft upsell card (reused by gated features) */
.upsell { gap: 8px; }
.upsell__badge {
  align-self: flex-start; font-size: 11px; font-weight: 800; letter-spacing: 0.03em;
  color: #fff; background: var(--green); border-radius: 999px; padding: 3px 10px;
}
.upsell__msg { margin: 0; font-size: 14px; line-height: 1.5; color: var(--green-dark); }

/* Locked controls */
.card-select--locked { opacity: 0.72; }
.card-select__title { display: inline-flex; align-items: center; gap: 6px; }
.card-select__lock { display: inline-flex; color: var(--muted); }
.tile--ghost .tile__lock { position: absolute; top: 12px; right: 14px; color: var(--muted); }
.tile { position: relative; }

.setting--sub .setting__value { font-weight: 700; color: var(--green-600); }
/* .promods / .promod / .promod__soon removed with the "Pro modules — Coming soon" placeholder. */

/* ── Coaching tab (Home · Diary · Coaching · Settings) ───────────────────────── */
.screen.coaching { gap: 20px; }
.coach-sec { display: flex; flex-direction: column; gap: 10px; }
.coach-sec__title { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: 0.01em; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.coach-sec__intro { margin: 0; font-size: 13px; line-height: 1.55; color: var(--muted); }
.coach-sec__note { margin: 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.coach-sec--think { gap: 12px; }
/* Section 0 — today's actual coaching. It hosts nodes built by the Today view, so it only supplies
   the slot and the rhythm; nothing here restyles what those renderers return. */
.coach-sec--today { gap: 8px; }
.coach-sec--today .linkbtn { align-self: flex-start; }
.coach-grades { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

/* The featured Pro module set. A locked card is deliberately NOT a button — no lock flow, no
   paywall (that arrives with RevenueCat); a non-Pro user is only told the module exists.
   Card system (visual-polish pass): every card in this list — locked `.procard` or the live
   `.setting` row an entitled user sees instead (same DOM class Settings has always used) — gets
   the same elevation (radius/shadow) as the rest of the app's card language, plus a thin left
   accent. The accent colour is the four-tone "spectrum" from the parked brand direction (teal →
   green → amber → coral), one tone per module, in the fixed render order coaching.js always uses
   (GLP-1 → Glycemic → Gut → Aging) — a small per-module identity with no new JS or i18n. */
.procards { display: flex; flex-direction: column; gap: 10px; }
.procards > .procard,
.procards > .setting {
  border-radius: var(--radius); box-shadow: var(--shadow);
  border-left-width: 4px; border-left-style: solid; border-left-color: var(--line);
}
.procards > *:nth-child(1) { border-left-color: var(--spectrum-1); }
.procards > *:nth-child(2) { border-left-color: var(--spectrum-2); }
.procards > *:nth-child(3) { border-left-color: var(--spectrum-3); }
.procards > *:nth-child(4) { border-left-color: var(--spectrum-4); }
.procard {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
/* Restrained gold "PRO" pill — deliberately a different tone from the amber .evbadge--moderate
   evidence badge (a subscription tier is not an evidence grade) and from .paywall__badge (a
   pricing-tier callout), so the three never get confused for one another at a glance. */
.procard__badge {
  font-size: 11px; font-weight: 800; letter-spacing: 0.03em; color: var(--gold-ink);
  background: var(--gold-bg); border: 1px solid var(--gold-line); border-radius: 999px; padding: 2px 8px;
  flex: 0 0 auto;
}

/* About / methodology + disclaimer (Stage 6 polish) */
.setting--about { gap: 10px; }
.about__block { display: flex; flex-direction: column; gap: 3px; }
.about__block--warn {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px;
}
.about__head { font-size: 13px; font-weight: 800; letter-spacing: 0.02em; color: var(--ink); }
.about__body { margin: 0; font-size: 13px; line-height: 1.55; color: var(--muted); }

/* ── Progress / Trends (Coaching v2) ─────────────────────────────────────────── */
.screen.progress { gap: 12px; }
.progress__period { align-self: center; }
.progress__head { font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-top: 6px; }
.progress__grid { display: flex; flex-direction: column; gap: 10px; }
.kpi {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 6px;
}
.kpi--north { border-color: var(--green-200); background: var(--green-50); }
.kpi__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kpi__label { font-size: 14px; font-weight: 700; }
.kpi__dir { font-size: 18px; font-weight: 800; line-height: 1; }
.kpi__dir--good { color: var(--green-600); }
.kpi__dir--warn { color: #d97706; }
.kpi__dir--hold { color: var(--muted); }
.kpi__dir--new  { color: var(--muted); }
.kpi__valrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kpi__val { font-size: 22px; font-weight: 800; color: var(--ink); }
.kpi__note { font-size: 13px; color: var(--muted); }
.spark { display: inline-flex; width: 64px; height: 22px; }
.spark--empty { opacity: 0; }
/* Adaptive targets (Pro) */
.adapt { gap: 6px; }
.adapt__line { margin: 0; font-size: 14px; font-weight: 600; color: var(--green-dark); }
.adapt__why { font-size: 12px; }

/* ── Consent + legal + data rights (Stage 7B) ───────────────────────────────── */
.screen.consent { gap: 14px; }
.check {
  appearance: none; cursor: pointer; text-align: left; width: 100%;
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px;
}
.check--on { border-color: var(--green); background: var(--green-50); }
.check__box {
  flex: none; width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--line);
  background: var(--card); display: inline-flex; align-items: center; justify-content: center; margin-top: 1px;
}
.check--on .check__box { background: var(--green); border-color: var(--green); }
.check__text { display: flex; flex-direction: column; gap: 3px; }
.check__label { font-size: 15px; font-weight: 700; }
.check__desc { font-size: 13px; color: var(--muted); line-height: 1.5; }
.consent__links { text-align: center; font-size: 13px; }
.consent__link { padding: 2px 2px; font-size: 13px; }

.screen.legal { gap: 10px; }
.legal__draft { background: #fef3c7; border-color: #fde68a; color: #854d0e; font-size: 13px; }
.legal__sec { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.legal__h { font-size: 16px; font-weight: 800; }
.legal__b { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); white-space: pre-wrap; }
.about__legal { display: flex; gap: 8px; align-items: center; }
.setting--data { gap: 8px; }
.btn--danger { color: #dc2626; }
.btn--primary.btn--danger { background: #dc2626; color: #fff; border-color: #dc2626; }

/* ── Today nutrition summary (Stage 8) ──────────────────────────────────────── */
.home__today:empty { display: none; }
.today {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 12px;
  border-left: 4px solid var(--green-600);   /* card-system accent — matches the Coaching tab's cards */
}
.today--flat { box-shadow: none; border-left-color: var(--green-200); }
.today__head { display: flex; align-items: baseline; justify-content: space-between; }
.today__title { font-size: 16px; font-weight: 800; }
.today__meals { font-size: 12px; font-weight: 700; color: var(--muted); }
.today__headline { display: flex; align-items: center; gap: 12px; }
.today__score { flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: var(--shadow); }
.today__score[data-band="good"] { background: var(--green); }
.today__score[data-band="ok"]   { background: #d97706; }
.today__score[data-band="low"]  { background: #dc2626; }
.today__scorenum { font-size: 20px; font-weight: 800; line-height: 1; }
.today__scorecap { font-size: 9px; font-weight: 700; opacity: 0.9; }
.today__hl { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.today__nova { font-size: 13px; font-weight: 700; color: var(--green-dark); }
.today__adequacy { font-size: 13px; color: var(--muted); line-height: 1.45; }
.today__rows { display: flex; flex-direction: column; gap: 8px; }
.today__row { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; background: var(--bg); border-radius: 10px; }
.today__rowtop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.today__rowlabel { font-size: 13px; font-weight: 700; }
.today__cue { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.today__cue--good { background: var(--green-100); color: var(--green-dark); }
.today__cue--warn { background: #fef3c7; color: #854d0e; }
.today__cue--neutral { background: var(--line); color: var(--muted); }
.today__rowvals { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.today__rowact { font-size: 16px; font-weight: 800; color: var(--ink); }
.today__rowtgt { font-size: 12px; color: var(--muted); }
.today__toggle { align-self: flex-start; padding: 2px 2px; font-size: 14px; }
.today__detailinner { display: flex; flex-direction: column; gap: 8px; }
.today__dgrid { display: flex; flex-direction: column; gap: 4px; }
.today__drow { display: flex; align-items: baseline; gap: 8px; }
.today__dlabel { font-size: 13px; font-weight: 600; flex: 1; }
.today__dval { font-size: 14px; font-weight: 700; }
.today__dtgt { font-size: 12px; color: var(--muted); }
.today__micro--good { color: var(--green-600); } .today__micro--ok { color: #d97706; } .today__micro--low { color: var(--muted); }
.today__micnote { font-size: 12px; margin: 0; }
.today__dhead { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-top: 4px; }
.today__permeal { display: flex; flex-direction: column; gap: 4px; }
.today__pm { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 13px; }
.today__pmname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.today__pmmeta { color: var(--muted); flex: none; }
.today__est { font-size: 12px; margin: 0; }
.progress__nutrition { display: flex; flex-direction: column; gap: 8px; }

/* ── PHASE5 §3.1 target-gap bars (CSS-only, no chart lib) ─────────────────────── */
.gapbar { margin: 3px 0 1px; }
.gapbar__track { position: relative; height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; }
.gapbar__fill { position: absolute; left: 0; top: 0; bottom: 0; min-width: 3px; border-radius: 999px; }
.gapbar__fill--good { background: var(--green); }
.gapbar__fill--warn { background: #d97706; }
.gapbar__fill--over { background: #64748b; }
.gapbar__target { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--ink); opacity: 0.5; }
.today__togo { font-size: 12px; font-weight: 700; }
.today__togo--adeq { color: var(--green-dark); }
.today__togo--band { color: var(--muted); font-weight: 600; }

/* ── PHASE5 §3.2 next-meal suggestion (one pull surface; never a push) ─────────── */
.suggest { margin-top: 10px; padding: 10px 12px; background: var(--green-100); border-radius: 12px; }
.suggest__eyebrow { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--green-dark); }
.suggest__line { margin: 2px 0 0; font-size: 14px; line-height: 1.4; }
.suggest--line { margin-top: 8px; font-size: 13px; line-height: 1.4; }

/* ── Boot splash (neutral first frame — no Home/Welcome flash) ───────────────── */
.screen.boot { background: var(--bg); }
.boot__mark { font-size: 30px; font-weight: 800; letter-spacing: -0.01em; color: var(--green-dark); opacity: 0.9; }

/* ── Calibration: nudge stepper + manual width field (robust multi-capture) ──── */
.cal__nudge { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 8px 0; }
.cal__step { min-width: 52px; font-size: 24px; line-height: 1; padding: 10px 0; }
.cal__editrow { display: flex; align-items: baseline; gap: 6px; }
.cal__width { width: 96px; text-align: center; font-size: 22px; font-weight: 700; }
.cal__unit { font-size: 15px; }
.callout--warn { background: #fff7ed; border-color: #fed7aa; color: #9a3412; }
.cal__warn { margin-top: 8px; }

/* ── Chrono-nutrition pattern observations (Today + Progress) — observations, not scores ── */
.chrono { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line, #eee); display: flex; flex-direction: column; gap: 8px; }
.chrono__title { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.chrono__obs { display: flex; flex-direction: column; gap: 2px; padding-left: 10px; border-left: 3px solid var(--line, #e3e3e3); }
.chrono__obs--flag { border-left-color: #b07a1e; }
.chrono__obs--good { border-left-color: var(--green, #1c9a93); }
.chrono__obs--ctx  { border-left-color: var(--line, #e3e3e3); }
.chrono__line { font-size: 14px; font-weight: 600; color: var(--ink, #1a1a1a); }
.chrono__obs--ctx .chrono__line { font-weight: 500; }
.chrono__sub { font-size: 12.5px; line-height: 1.4; }

/* ── First-run walkthrough overlay (shown once on first Home arrival) ────────────── */
.wt {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 20px; padding-bottom: calc(env(safe-area-inset-bottom) + 24px);
  background: rgba(6, 20, 18, 0.55); backdrop-filter: blur(2px);
  animation: wt-fade 0.18s ease-out;
}
@keyframes wt-fade { from { opacity: 0; } to { opacity: 1; } }
.wt__card {
  width: 100%; max-width: 420px; background: var(--bg, #fff);
  border-radius: 20px; padding: 22px 22px 18px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.28);
  display: flex; flex-direction: column; gap: 8px;
  animation: wt-rise 0.22s ease-out;
}
@keyframes wt-rise { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.wt__icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--green-tint, #e7f5ef); color: var(--green-dark, #12805c); margin-bottom: 2px;
}
.wt__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--green-dark, #12805c); }
.wt__title { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; margin: 0; }
.wt__body { font-size: 15px; line-height: 1.45; color: var(--muted, #556); margin: 0; }
.wt__dots { display: flex; gap: 7px; margin: 12px 0 4px; }
.wt__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line, #d8ddda); }
.wt__dot--on { background: var(--green, #1c9a93); width: 20px; border-radius: 4px; }
.wt__actions { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.wt__next { min-width: 108px; }

/* ── Compact "Today" glance on Home (taps through to the full Today detail) ──────── */
.glance {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px 16px; margin: 4px 0 2px;
  background: var(--card, #fff); border: 1px solid var(--line, #e7ebe9);
  border-left: 4px solid var(--green-600);   /* card-system accent — matches .today / the Coaching cards */
  border-radius: 16px; text-align: left; cursor: pointer; box-shadow: var(--shadow);
  transition: border-color 0.15s ease, transform 0.05s ease;
}
.glance:active { transform: scale(0.995); }
.glance__main { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.glance__label { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.glance__row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.glance__score {
  flex: none; min-width: 34px; height: 30px; padding: 0 8px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 800; color: #fff; background: var(--green, #1c9a93);
  box-shadow: var(--shadow);
}
.glance__score[data-band="ok"]  { background: #b0870f; }
.glance__score[data-band="low"] { background: #b4552b; }
.glance__score--empty { background: var(--line, #d8ddda); color: var(--muted); }
.glance__status { font-size: 15px; font-weight: 600; color: var(--ink, #1a2420); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.glance__chev { flex: none; color: var(--muted); display: flex; }
.today__head--view { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }

/* §5 day-review navigation: ← [Day · N logged] → */
.today__daynav { display: flex; align-items: center; gap: 8px; }
.today__head--center { flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; }
.today__nav {
  display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 auto;
  border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--fg); cursor: pointer;
}
.today__nav:disabled { opacity: 0.3; cursor: default; }
.today__pasttargets { margin-top: 6px; text-align: center; font-size: 12px; }

/* §5 Past-reviews list on the audit screen */
.audit__history { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.audit__histrow {
  display: flex; flex-direction: column; gap: 2px; text-align: left; width: 100%;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); cursor: pointer;
}
.audit__histwhen { font-size: 12px; font-weight: 700; color: var(--muted); }
.audit__histhead { font-size: 14px; }

/* ── Neutral KPI direction (weight trend — never good/bad) ───────────────────────── */
.kpi__dir--neutral { color: #64748b; }

/* ── Weight log ─────────────────────────────────────────────────────────────────── */
.weight__form { display: flex; gap: 12px; margin: 12px 0 4px; }
.weight__field { flex: 1; display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.weight__field .field { width: 100%; }
.weight__kginput { font-size: 20px; font-weight: 700; }
.weight__err:empty { display: none; }
.weight__err { color: #b4552b; margin: 2px 0 8px; }
.weight__recent-title { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin: 20px 0 8px; }
.weight__list { display: flex; flex-direction: column; }
.weight__item { display: flex; align-items: center; justify-content: space-between; padding: 11px 2px; border-bottom: 1px solid var(--line, #eef1ef); }
.weight__itemmain { display: flex; align-items: baseline; gap: 12px; }
.weight__kg { font-size: 16px; font-weight: 700; }
.weight__date { font-size: 13px; }
.weight__del { color: #b4552b; font-size: 13px; }

/* 16+ hard floor (AGE_FLOOR_SPEC §3) — the block / paused screens. */
.agegate__body { font-size: 15px; line-height: 1.65; margin-top: 8px; }