/* ===========================================================================
   GoodHealthStack — shared design system
   Editorial-warm, high-craft. Quicksand display + readable system body.
   One desaturated sage accent · tinted shadows · custom easing · auto light/dark.
   Vanilla CSS, self-hosted font, no runtime CDN, no build step.
   =========================================================================== */

@font-face{
  font-family:"Quicksand";
  src:url("/_assets/fonts/quicksand-latin.woff2") format("woff2");
  font-weight:300 700;         /* variable */
  font-style:normal;
  font-display:swap;
}

/* ---------- Tokens: light (default) ---------- */
:root{
  color-scheme:light dark;
  --bg:#faf7f2;                /* warm cream */
  --surface:#fffdf9;           /* warm white card */
  --surface-2:#f4efe7;         /* recessed / input hover */
  --ink:#241f1a;               /* warm near-black */
  --muted:#7c7268;             /* warm gray */
  --line:#ece4d9;              /* warm hairline */
  --accent:#2f6f5f;            /* deep sage — AA as fill(white) & text-on-cream */
  --accent-hover:#275a4d;
  --accent-ink:#fffdf9;
  --accent-soft:#e7f0ec;       /* sage tint: hero, eyebrows, callouts */
  --ok:#2f6f5f;
  --warn:#c05f3e;              /* warm terracotta (not a screaming red) */
  --warn-soft:#f6e4dc;
  --shadow-1:0 1px 2px rgba(52,38,24,.05);
  --shadow-2:0 6px 22px -8px rgba(52,38,24,.14);
  --shadow-3:0 18px 44px -18px rgba(52,38,24,.20);
  --r-lg:20px; --r-md:14px; --r-sm:11px;
  --font-display:"Quicksand", ui-rounded, "Segoe UI", system-ui, sans-serif;
  --font-body:system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);
  --maxw:760px;
}
/* ---------- Tokens: dark (auto, follows OS) ---------- */
@media (prefers-color-scheme:dark){
  :root{
    --bg:#16130f; --surface:#201c17; --surface-2:#282219;
    --ink:#efe9e0; --muted:#a89e91; --line:#322b22;
    --accent:#74c3ab; --accent-hover:#8bd0ba; --accent-ink:#10201b; --accent-soft:#1d2924;
    --ok:#74c3ab; --warn:#e59274; --warn-soft:#332019;
    --shadow-1:0 1px 2px rgba(0,0,0,.3);
    --shadow-2:0 8px 26px -10px rgba(0,0,0,.55);
    --shadow-3:0 22px 50px -20px rgba(0,0,0,.6);
  }
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);line-height:1.65;
  font-family:var(--font-body);font-size:17px;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
/* warm film-grain: fixed, GPU-cheap, very subtle */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}
header,main,footer,nav{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:16px 22px}

/* ---------- Typography ---------- */
h1,h2,h3,.brandmark{font-family:var(--font-display)}
h1{font-size:clamp(1.9rem,5vw,2.85rem);font-weight:700;letter-spacing:-.02em;line-height:1.08;margin:.1em 0 .15em;text-wrap:balance}
h2{font-size:clamp(1.28rem,2.9vw,1.65rem);font-weight:600;letter-spacing:-.01em;margin:1.7em 0 .2em;text-wrap:balance}
h3{font-size:1.05rem;font-weight:600;margin:.6em 0 .2em}
p{color:var(--muted);text-wrap:pretty}
li{color:var(--muted)}
strong,b{color:var(--ink);font-weight:600}
a{color:var(--accent);text-decoration:none;text-underline-offset:3px}
@media (hover:hover) and (pointer:fine){ a:hover{text-decoration:underline} }

/* ---------- Top nav / header ---------- */
.topnav{padding-bottom:0}
.topnav a{font-family:var(--font-display);font-weight:600;font-size:.92rem;color:var(--muted)}
.topnav a::before{content:"";}
@media (hover:hover){ .topnav a:hover{color:var(--accent);text-decoration:none} }
.lede{color:var(--muted);font-size:clamp(1.04rem,1.5vw,1.18rem);max-width:60ch;margin:.2em 0 0}

/* ---------- Cards / surfaces ---------- */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:24px;margin:18px 0;box-shadow:var(--shadow-1),var(--shadow-2);
}
.card > h2:first-child, .card > h2[style]{margin-top:0}

/* ---------- Eyebrow / chips ---------- */
.eyebrow{display:inline-block;font-family:var(--font-display);font-weight:700;
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);
  background:var(--accent-soft);padding:5px 11px;border-radius:999px;margin-bottom:6px}

/* ---------- Forms ---------- */
label{display:block;font-family:var(--font-display);color:var(--muted);font-size:.9rem;font-weight:600;margin:12px 0 6px}
input,select{
  width:100%;min-height:50px;background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;font-size:1rem;
  font-family:var(--font-body);transition:border-color 160ms var(--ease-out),box-shadow 160ms var(--ease-out);
}
@media (hover:hover){ input:hover,select:hover{border-color:var(--accent)} }
.row{display:flex;gap:16px;flex-wrap:wrap}
.row>div{flex:1;min-width:150px}

/* ---------- Buttons ---------- */
button{
  font-family:var(--font-display);font-weight:600;font-size:1rem;
  background:var(--accent);color:var(--accent-ink);border:none;border-radius:var(--r-sm);
  padding:13px 20px;min-height:48px;cursor:pointer;
  transition:background-color 160ms var(--ease-out),transform 120ms var(--ease-out),box-shadow 160ms var(--ease-out);
}
@media (hover:hover) and (pointer:fine){ button:hover{background:var(--accent-hover);box-shadow:var(--shadow-2)} }
button:active{transform:scale(.97)}
button.ghost{background:var(--surface-2);color:var(--ink);box-shadow:none}
@media (hover:hover) and (pointer:fine){ button.ghost:hover{background:var(--line);box-shadow:none} }

/* ---------- Hero result ---------- */
.result{
  background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
  border-radius:var(--r-md);padding:20px 22px;margin-top:8px;
  font-family:var(--font-display);font-size:clamp(2.6rem,8vw,4rem);font-weight:700;color:var(--accent);
  line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.result .big{display:block;font-size:1rem;font-weight:500;color:var(--muted);margin-top:8px;letter-spacing:0;font-family:var(--font-body)}
#perMeal{margin:12px 0 0;font-size:.98rem}

/* ---------- Progress bar + badge ---------- */
.bar{height:14px;background:var(--surface-2);border-radius:999px;overflow:hidden;border:1px solid var(--line);margin:12px 0}
.bar>span{display:block;height:100%;background:var(--ok);width:100%;transform:scaleX(0);transform-origin:left;
  transition:transform 450ms var(--ease-drawer),background-color 200ms var(--ease-out)}
.badge{display:inline-block;font-family:var(--font-mono);font-size:.8rem;font-weight:600;
  padding:4px 11px;border-radius:999px;background:var(--accent-soft);color:var(--accent);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
/* mono numerals for precise data readouts */
.meal input,#usedFat,#limitFat,table td:last-child{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.badge.over{background:var(--warn-soft);color:var(--warn)}
.over{color:var(--warn)!important}

/* ---------- Meal rows ---------- */
.meals{margin-top:12px}
.meal{display:flex;gap:12px;align-items:center;margin:9px 0}
.meal>span:first-child{flex:1;font-family:var(--font-display);font-weight:500}
.meal input{width:98px;min-height:44px}

/* ---------- Ad slots (hidden until AdSense approved) ---------- */
.adslot{display:none;min-height:90px;align-items:center;justify-content:center;
  color:var(--muted);border:1px dashed var(--line);border-radius:var(--r-md);margin:18px 0;font-size:.8rem;opacity:.7}
:root[data-ads="on"] .adslot{display:flex}

/* ---------- Disclaimer / callout ---------- */
.disclaimer{font-size:.9rem;line-height:1.55;background:var(--accent-soft);
  border:1px solid var(--line);border-left:3px solid var(--accent);color:var(--muted);
  border-radius:var(--r-sm);padding:14px 16px}
.disclaimer b{color:var(--ink)}

/* ---------- Tables ---------- */
table{width:100%;border-collapse:collapse;font-size:.95rem;font-variant-numeric:tabular-nums}
td,th{text-align:left;padding:11px 8px;border-bottom:1px solid var(--line);color:var(--ink)}
th{font-family:var(--font-display);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
tbody tr:last-child td, tr:last-child td{border-bottom:none}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line);margin-top:28px}
.fine{font-size:.85rem;color:var(--muted)}
.fine a{color:var(--muted)}
@media (hover:hover){ .fine a:hover{color:var(--accent)} }

/* ---------- Hub directory grid ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;margin:20px 0}
.toolcard{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:20px;text-decoration:none;color:var(--ink);box-shadow:var(--shadow-1);
  transition:transform 220ms var(--ease-out),box-shadow 220ms var(--ease-out),border-color 220ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .toolcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-3);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
}
.toolcard h3{font-size:1.12rem;margin:.1em 0 .3em}
.toolcard p{margin:0;font-size:.92rem}

/* ---------- FAQ ---------- */
.faq h3{font-size:1.02rem;margin:1.1em 0 .2em;color:var(--ink)}
.faq p{margin:.2em 0 .7em}

/* ---------- Focus + skip link ---------- */
:where(a,button,input,select,.toolcard):focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
input:focus-visible,select:focus-visible{outline-offset:0;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.skip{position:absolute;left:-9999px;top:0;z-index:10;background:var(--accent);color:var(--accent-ink);
  padding:10px 14px;border-radius:0 0 10px 0;font-weight:700;font-family:var(--font-display)}
.skip:focus{left:0}

/* ---------- Gentle entry (first paint only; occasional = tasteful) ---------- */
@supports (animation-timeline:view()){
  main > .card, main > .adslot{animation:rise .55s var(--ease-out) both}
}
main > .card{animation:rise .55s var(--ease-out) both}
main > .card:nth-child(2){animation-delay:.04s}
main > .card:nth-child(3){animation-delay:.08s}
main > .card:nth-child(4){animation-delay:.12s}
main > .card:nth-child(5){animation-delay:.16s}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

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

/* ---------- Responsive ---------- */
@media (max-width:520px){
  body{font-size:16px}
  .row>div{min-width:100%}
  header,main,footer,nav{padding:14px 18px}
  .card{padding:20px}
}