/* Shared design system: tokens + components. Page files only keep page-specific rules. */
:root{
  color-scheme:light dark;
  /* palette — calm teal health theme */
  --bg:#f3f6f5; --card:#ffffff; --fg:#16201c; --muted:#56625c; --line:#e1e7e4; --line-strong:#cdd6d1;
  --accent:#0f766e; --on-accent:#ffffff; --accent-weak:color-mix(in srgb,var(--accent) 11%,var(--card));
  --chip:#edf2ef; --track:#e7ece9;
  --ok:#15803d; --warn:#b45309; --bad:#b91c1c; --est:#7c3aed; --ox:#6d28d9;
  --ok-ink:#166534; --warn-ink:#92400e; --bad-ink:#991b1b; --est-ink:#6d28d9; --ox-ink:#5b21b6;
  /* nutrient colors (same hues as the charts) */
  --n-protein:#8b5cf6; --n-fiber:#a16207; --n-carb:#94a3b8; --n-fat:#f59e0b; --n-na:#78716c; --n-k:#2563eb;
  --n-ca:#0ea5e9; --n-mg:#6366f1; --n-vitc:#eab308; --n-folate:#0d9488; --n-energy:#64748b;
  /* type scale */
  --fs-title:1.5rem; --fs-card:1.0625rem; --fs-num:2rem; --fs-body:1rem; --fs-sm:.875rem; --fs-cap:.75rem; --fs-xs:.6875rem;
  /* spacing (4/8) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  /* radii + elevation */
  --r-sm:6px; --r:12px; --r-lg:16px; --r-pill:999px;
  --sh:0 1px 2px rgba(16,32,26,.05),0 4px 14px rgba(16,32,26,.05);
  --nav-h:64px;
  --font:-apple-system,BlinkMacSystemFont,"PingFang SC","HarmonyOS Sans SC","HarmonyOS Sans","MiSans","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei","Noto Sans CJK SC","Source Han Sans SC",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0d1311; --card:#151c19; --fg:#e4ebe7; --muted:#9daaa3; --line:#253029; --line-strong:#33413a;
  --accent:#2dd4bf; --on-accent:#032420; --accent-weak:color-mix(in srgb,var(--accent) 14%,var(--card));
  --chip:#1c2521; --track:#222c27;
  --ok:#4ade80; --warn:#fbbf24; --bad:#f87171; --est:#c4b5fd; --ox:#c4b5fd;
  --ok-ink:#86efac; --warn-ink:#fcd34d; --bad-ink:#fca5a5; --est-ink:#ddd6fe; --ox-ink:#ddd6fe;
  --sh:none;
}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:var(--fs-body)/1.6 var(--font);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
  padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + var(--s2))}
a{color:var(--accent);text-underline-offset:2px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)}
[hidden]{display:none!important}
b,strong{font-weight:650}
.num,table,.kpi b,.ebig,.eeq b{font-variant-numeric:tabular-nums}

/* ---------- navigation: bottom tab bar on mobile, top bar on wide screens ---------- */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:20;background:color-mix(in srgb,var(--card) 92%,transparent);
  backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.nav ul{list-style:none;margin:0 auto;padding:4px 6px;max-width:640px;display:grid;grid-template-columns:repeat(5,1fr);gap:2px}
.nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:56px;padding:4px 2px;border-radius:var(--r);
  color:var(--muted);text-decoration:none;font-size:var(--fs-xs);font-weight:500;line-height:1.2;white-space:nowrap}
.nav svg{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;padding:2px 10px;box-sizing:content-box;border-radius:var(--r-pill)}
.nav a[aria-current=page]{color:var(--accent);font-weight:650}
.nav a[aria-current=page] svg{background:var(--accent-weak)}
.nav a:active{background:var(--chip)}
@media (min-width:768px){
  body{padding-bottom:var(--s6)}
  .nav{position:sticky;top:0;bottom:auto;border-top:0;border-bottom:1px solid var(--line);padding-bottom:0}
  .nav ul{max-width:1080px;display:flex;justify-content:center;gap:var(--s1);padding:var(--s2) var(--s4)}
  .nav a{flex-direction:row;gap:6px;min-height:40px;padding:0 14px;font-size:var(--fs-sm);border-radius:var(--r-pill)}
  .nav svg{width:18px;height:18px;padding:0;background:none!important}
  .nav a[aria-current=page]{background:var(--accent-weak)}
}

/* ---------- layout + headings ---------- */
main{max-width:760px;margin:0 auto;padding:var(--s4) var(--s4) var(--s5)}
h1{font-size:var(--fs-title);line-height:1.3;font-weight:700;letter-spacing:.01em;margin:var(--s2) 0 var(--s1)}
.sub{color:var(--muted);font-size:var(--fs-sm);line-height:1.55;margin:0 0 var(--s4)}
@media (min-width:1000px){
  main.two{max-width:1080px;display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s4);align-items:start}
  main.two>*{grid-column:1/-1}
  main.two>.half{grid-column:auto}
}

/* ---------- card ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s4);margin:0 0 var(--s3);box-shadow:var(--sh)}
.card h2{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s1) var(--s2);font-size:var(--fs-card);line-height:1.35;font-weight:650;margin:0 0 var(--s3)}
.card h2 small{font-weight:400;color:var(--muted);font-size:var(--fs-cap)}
.card h3{font-size:.9375rem;font-weight:650}

/* ---------- chips + segmented controls ---------- */
.chips{display:flex;flex-wrap:wrap;gap:var(--s2);margin:0 0 var(--s2)}
.chip{flex:0 0 auto;min-height:40px;padding:0 14px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--card);color:var(--fg);
  font:inherit;font-size:var(--fs-sm);cursor:pointer;white-space:nowrap;transition:background-color .15s,border-color .15s,color .15s}
.chip:hover{border-color:var(--line-strong)}
.chip[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
.seg,.tabs{display:inline-flex;gap:2px;background:var(--chip);border-radius:var(--r);padding:3px}
.tabs{display:grid;grid-template-columns:1fr 1fr;width:100%;margin-bottom:var(--s3)}
.seg button,.tabs button{min-height:38px;padding:0 12px;border:0;border-radius:calc(var(--r) - 3px);background:transparent;color:var(--muted);font:inherit;font-size:var(--fs-sm);cursor:pointer}
.tabs button{min-height:42px;font-weight:600}
.seg button[aria-pressed=true],.tabs button[aria-pressed=true]{background:var(--card);color:var(--accent);font-weight:650;box-shadow:0 1px 3px rgba(0,0,0,.12)}

/* ---------- progress bars (shared look) ---------- */
.track,.nb .track,.bar .t{position:relative;height:12px;background:var(--track);border-radius:var(--r-pill);overflow:hidden}
.nb .fill,.ecard .fill,.bar .f{border-radius:var(--r-pill)}

/* ---------- tags ---------- */
.tag,span.miss,.estt,.tc,.otag,.ktag,.stag,.btag,.flag,.src{display:inline-flex;align-items:center;gap:2px;margin-left:4px;padding:0 7px;border-radius:var(--r-pill);
  font-size:var(--fs-xs);font-weight:600;line-height:1.7;white-space:nowrap;vertical-align:1px;border:1px solid transparent;background:var(--chip);color:var(--muted)}
span.miss,.flag,.stag,.tag.warn{background:color-mix(in srgb,var(--warn) 14%,var(--card));color:var(--warn-ink)}
.estt,.tc,.src.est{background:color-mix(in srgb,var(--est) 9%,var(--card));color:var(--est-ink);border:1px dashed color-mix(in srgb,var(--est) 55%,transparent)}
.otag{background:color-mix(in srgb,var(--ox) 13%,var(--card));color:var(--ox-ink)}
.ktag,.tag.bad{background:color-mix(in srgb,var(--bad) 12%,var(--card));color:var(--bad-ink)}
.tag.ok{background:color-mix(in srgb,var(--ok) 13%,var(--card));color:var(--ok-ink)}
.tag.todo,.btag,.src{background:var(--chip);color:var(--muted);border-color:var(--line)}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
th,td{padding:8px 6px;border-bottom:1px solid var(--line);text-align:right;vertical-align:top}
th:first-child,td:first-child{text-align:left;padding-left:0}
th:last-child,td:last-child{padding-right:0}
th{color:var(--muted);font-weight:500;font-size:var(--fs-cap)}
tr:last-child td{border-bottom:0}

/* ---------- inputs ---------- */
input[type=search],select{min-height:44px;width:100%;font:inherit;font-size:var(--fs-body);border-radius:var(--r);border:1px solid var(--line);background:var(--card);color:var(--fg);padding:0 14px;margin:0 0 var(--s3)}
select{width:auto;max-width:100%}
input[type=search]:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-weak)}

/* ---------- collapsible details ---------- */
details.more>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--s2);min-height:44px;font-weight:650;color:var(--fg)}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translateY(-2px);transition:transform .2s;flex:none;margin-right:4px}
details.more[open]>summary::after{transform:rotate(-135deg)}
details.more>summary small{font-weight:400;color:var(--muted);font-size:var(--fs-cap);margin-right:auto}
details.more>.body,details.more>div,details.more>p{margin-top:var(--s2)}
details.card.more{padding-top:var(--s1);padding-bottom:var(--s1)}
details.card.more[open]{padding-bottom:var(--s4)}
details.mini>summary{cursor:pointer;color:var(--warn-ink);font-size:var(--fs-cap);list-style:none;display:inline-flex;align-items:center;min-height:28px}
details.mini>summary::-webkit-details-marker{display:none}
details.mini>summary::before{content:"▸";margin-right:4px;transition:transform .2s;display:inline-block}
details.mini[open]>summary::before{transform:rotate(90deg)}

/* ---------- text helpers ---------- */
.note,.basis{color:var(--muted);font-size:.8125rem;line-height:1.65}
.empty{color:var(--muted);text-align:center;padding:var(--s5) var(--s3);font-size:var(--fs-sm)}
.empty::before{content:"";display:block;width:32px;height:32px;margin:0 auto var(--s2);border-radius:50%;border:2px dashed var(--line-strong)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* ---------- stat tiles (shared by KPI grids) ---------- */
.kpi,.ebg,.kcal{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s2);margin:0 0 var(--s2)}
.kcal{grid-template-columns:repeat(3,1fr)}
.kpi>div,.ebg>div,.kcal>div,.stat{background:var(--chip);border-radius:var(--r);padding:10px 12px;min-width:0}
.kpi b,.ebg b,.kcal b{display:block;font-size:1.25rem;font-weight:700;line-height:1.25;font-variant-numeric:tabular-nums}
.kpi>div>span,.ebg>div>span,.kcal>div>span{display:block;font-size:var(--fs-cap);color:var(--muted);line-height:1.4;margin-top:2px}

/* ---------- nutrient / target bars (.nb) ---------- */
.nb{margin:0 0 var(--s4)}
.nb .top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2);font-size:.9375rem;font-weight:600;margin-bottom:var(--s1)}
.nb .top .t{color:var(--muted);font-size:var(--fs-cap);font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums}
.nb .fill{position:absolute;left:0;top:0;bottom:0;background:var(--accent)}
.nb .band{position:absolute;top:0;bottom:0;background:var(--ok);opacity:.2}
.nb .mk{position:absolute;top:-2px;bottom:-2px;width:0;border-left:2px solid var(--fg);opacity:.6}
.nb .mk.lim{border-left:2px dashed var(--bad);opacity:.95}
.nb .sub{color:var(--muted);font-size:var(--fs-cap);margin-top:var(--s1);line-height:1.5}
.nb .tg{margin:0 0 var(--s1)}
.nb .tg>span:first-child{margin-left:0}

.kpi>div>span>span,.ebg>div>span>span{display:inline-block}