/* ───────────────────────────────────────────────────────────────────────
   eudy — shared static-site styles  (about / privacy / terms / blog)
   No build step. Mirrors the app's design tokens + fonts. Light + dark.
   Linked absolutely as /eudy-site.css so it works from any /folder/ depth.
   ─────────────────────────────────────────────────────────────────────── */

/* Self-hosted fonts (latin subset) — no Google Fonts CDN request; files ship to /fonts
   via sync-site.ps1. Matches the app (135.html), which self-hosts the same woff2. */
@font-face{font-family:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/archivo-black-400-latin.woff2') format('woff2');}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:300;font-display:swap;src:url('/fonts/dm-mono-300-latin.woff2') format('woff2');}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/dm-mono-400-latin.woff2') format('woff2');}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/dm-mono-500-latin.woff2') format('woff2');}

:root{
  --bg:#f0ebe0; --bg-card:#faf7f2; --ink:#1e2018; --ink-soft:#5a5a4a;
  --day-head:#2a3020; --big:#5c3d1e; --med:#3a5c2a; --health:#1e4a4a;
  --sml:#2a4a3a; --meals:#3a3a6b; --premium:#8b6914; --line:#e3dccb;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#161c10; --bg-card:#1e2818; --ink:#d8e4c0; --ink-soft:#8a9e70;
    --day-head:#0e1408; --big:#c8904a; --med:#7ab85a; --health:#4ab8a0;
    --sml:#5ab090; --meals:#8888d0; --premium:#e8b84a; --line:#2c3a22;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"DM Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  font-weight:400;
  line-height:1.7;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:"Archivo Black",system-ui,-apple-system,sans-serif;
  font-weight:400;
  line-height:1.18;
  letter-spacing:-0.01em;
}
h1{font-size:clamp(1.9rem,5vw,2.7rem); margin:0 0 .6rem}
h2{font-size:clamp(1.2rem,3.2vw,1.5rem); margin:2.4rem 0 .8rem}
h3{font-size:1.05rem; margin:1.8rem 0 .5rem}
p{margin:0 0 1.1rem}
a{color:var(--med); text-decoration:underline; text-underline-offset:2px}
a:hover{color:var(--big)}
strong{font-weight:500}
hr{border:none; border-top:1px solid var(--line); margin:2.4rem 0}

/* ── Layout shell ───────────────────────────────────────────── */
.wrap{max-width:720px; margin:0 auto; padding:0 1.4rem}

.site-header{
  border-bottom:1px solid var(--line);
  background:var(--bg-card);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:1rem; padding-bottom:1rem;
}
.brand{
  display:inline-flex; align-items:baseline; gap:.55rem;
  font-family:"Archivo Black",system-ui,sans-serif;
  font-size:1.35rem; color:var(--ink); text-decoration:none; letter-spacing:-0.02em;
}
.brand:hover{color:var(--ink)}
.brand .dots{display:inline-flex; gap:3px; transform:translateY(1px)}
.brand .dots i{width:7px; height:7px; border-radius:50%; display:inline-block}
.brand .dots i:nth-child(1){background:var(--big)}
.brand .dots i:nth-child(2){background:var(--med)}
.brand .dots i:nth-child(3){background:var(--sml)}
.nav-cta{
  font-size:.9rem; text-decoration:none; color:var(--bg-card);
  background:var(--day-head); padding:.5rem .9rem; border-radius:8px;
}
.nav-cta:hover{color:var(--bg-card); opacity:.9}

main{padding:2.6rem 0 1rem}

/* ── About hero ─────────────────────────────────────────────── */
.hero-dots{display:flex; gap:.5rem; align-items:center; margin:0 0 1.6rem}
.hero-dots span{display:flex; gap:5px}
.hero-dots b{width:11px; height:11px; border-radius:50%; display:inline-block}
.hero-dots .g1 b{background:var(--big)}
.hero-dots .g2 b{background:var(--med)}
.hero-dots .g3 b{background:var(--sml)}
.lede{font-size:1.15rem; color:var(--ink)}
.muted{color:var(--ink-soft)}

.refuses{
  background:var(--bg-card); border:1px solid var(--line);
  border-radius:12px; padding:1.2rem 1.4rem; margin:1.6rem 0;
}
.refuses ul{margin:.4rem 0 0; padding-left:1.2rem}
.refuses li{margin:.35rem 0}

/* ── Legal documents ────────────────────────────────────────── */
.legal{max-width:760px}
.legal .updated{
  color:var(--ink-soft); font-size:.85rem; margin:-.2rem 0 2rem;
  padding-bottom:1.2rem; border-bottom:1px solid var(--line);
}
.legal h2{scroll-margin-top:1rem}
.legal ol, .legal ul{padding-left:1.4rem}
.legal li{margin:.4rem 0}
.toc{
  background:var(--bg-card); border:1px solid var(--line);
  border-radius:12px; padding:1rem 1.4rem; margin:0 0 2rem;
}
.toc strong{display:block; margin-bottom:.5rem; font-weight:500}
.toc ol{margin:0; padding-left:1.3rem}
.toc a{color:var(--ink-soft)}

/* Placeholder marker — VERY visible so unfinished text can never ship by accident.
   Delete the .ph rule (or the elements) once the real copy is in. */
.ph{
  display:block; background:repeating-linear-gradient(45deg,
    color-mix(in srgb, var(--premium) 14%, transparent) 0 10px,
    transparent 10px 20px);
  border:1px dashed var(--premium); border-radius:8px;
  padding:.8rem 1rem; margin:.6rem 0 1.1rem;
  color:var(--ink-soft); font-size:.92rem;
}
.ph::before{content:"✎ DRAFT — "; color:var(--premium); font-weight:500}

/* ── Footer (mirrors the in-app footer) ─────────────────────── */
.site-footer{
  border-top:1px solid var(--line); margin-top:3rem;
  background:var(--bg-card); color:var(--ink-soft); font-size:.85rem;
}
.site-footer .wrap{padding-top:1.6rem; padding-bottom:2rem}
.footer-links{display:flex; flex-wrap:wrap; gap:1.2rem; margin-bottom:.9rem}
.footer-links a{color:var(--ink-soft); text-decoration:none}
.footer-links a:hover{color:var(--med); text-decoration:underline}
.footer-copy{display:block}

/* ── Changelog ──────────────────────────────────────────────── */
.changelog{max-width:760px}
.cl-entry{display:flex; gap:1.4rem; padding:1.7rem 0; border-top:1px solid var(--line)}
.cl-entry:first-of-type{border-top:none; padding-top:.4rem}
.cl-ver{
  flex:0 0 auto; min-width:74px;
  font-family:"DM Mono",ui-monospace,monospace; font-weight:500; font-size:.82rem;
  color:var(--premium); padding-top:.3rem; letter-spacing:.01em;
}
.cl-body{flex:1 1 auto; min-width:0}
.cl-body h2{margin:0 0 .6rem; font-size:1.08rem}
.cl-body ul{margin:0; padding-left:1.2rem}
.cl-body li{margin:.4rem 0}
.cl-loading, .cl-error{color:var(--ink-soft); padding:1.4rem 0}
@media (max-width:560px){
  .cl-entry{flex-direction:column; gap:.45rem; padding:1.3rem 0}
  .cl-ver{padding-top:0}
}