/* Plentish design tokens — from the Claude Design handoff (Plentish.dc.html). */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500&family=Inter:wght@400;500;600&display=swap');

:root {
  --cream: #FAF6EE;      /* page background */
  --card: #FFFDF9;       /* cards, sheets */
  --green: #33553F;      /* wordmark, primary button */
  --mid-green: #6E9A6B;  /* secondary accent, icons */
  --amber: #E0863C;      /* CTA · severity "top up first" */
  --gold: #D9A93F;       /* severity "keep an eye" */
  --sage: #9CB394;       /* severity "watch" */
  --ink: #2A2521;        /* primary text */
  --muted: #6E665B;      /* secondary text */
  --hairline: #E4DCCB;   /* borders, dividers */
  --panel: #EEF3EA;      /* soft green panel */
  --panel-line: #D6E2CF;
  --amber-panel: #FBF3E8;
  --amber-line: #EAD9BF;

  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --r-card: 14px; --r-btn: 14px; --r-pill: 999px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--cream);
  font-family: var(--sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; cursor: pointer; }
.scr::-webkit-scrollbar { display: none; }
.scr { scrollbar-width: none; }

/* App is a mobile-first single column, centred on wide screens. */
#app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--cream);
  position: relative;
}
.view { flex: 1; overflow-y: auto; padding-bottom: 90px; animation: scrnIn .3s cubic-bezier(.22,.61,.36,1) both; }
.view.no-nav { padding-bottom: var(--sp-8); }
@keyframes scrnIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; } }

/* Typography */
.wordmark { font-family: var(--serif); font-weight: 500; color: var(--green); letter-spacing: -0.5px; }
.h1 { font-family: var(--serif); font-weight: 500; font-size: 27px; line-height: 1.18; letter-spacing: -0.3px; color: var(--ink); }
.h2 { font-family: var(--serif); font-weight: 500; font-size: 20px; color: var(--ink); }
.eyebrow { font-size: 13px; font-weight: 600; color: var(--mid-green); }
.label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #9a9186; }
.body { font-size: 15px; line-height: 1.55; color: #4c443a; }
.muted { color: var(--muted); }

/* Buttons */
.btn { width: 100%; height: 54px; border: none; border-radius: var(--r-btn); font-size: 16px; font-weight: 600; }
.btn-primary { background: var(--green); color: var(--cream); }
.btn-cta { background: var(--amber); color: #FFFDF9; }
.btn-secondary { background: none; border: 1.5px solid var(--green); color: var(--green); }
.btn-link { background: none; border: none; color: var(--green); font-size: 13px; font-weight: 500; }

/* Cards */
.card { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-card); }
.panel { background: var(--panel); border: 1px solid var(--panel-line); border-radius: var(--r-card); }
.amber-box { background: var(--amber-panel); border: 1px solid var(--amber-line); border-radius: var(--r-card); }

/* Severity pills + dots */
.pill { font-size: 11.5px; font-weight: 600; padding: 5px 10px; border-radius: var(--r-pill); white-space: nowrap; }
.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; }
.sev-high  { --sev: var(--amber); --sev-bg: rgba(224,134,60,0.14); --sev-txt: #B85E1F; }
.sev-medium{ --sev: var(--gold);  --sev-bg: rgba(217,169,63,0.16); --sev-txt: #9A7418; }
.sev-watch { --sev: var(--sage);  --sev-bg: rgba(156,179,148,0.22); --sev-txt: #4F6A4A; }
.sev-dot { background: var(--sev); }
.sev-pill { background: var(--sev-bg); color: var(--sev-txt); }

/* Bottom nav */
.nav {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px; height: 74px; padding-bottom: 8px;
  background: var(--card); border-top: 1px solid var(--hairline);
  display: flex; z-index: 20;
}
.nav button { flex: 1; background: none; border: none; display: flex; flex-direction: column; align-items: center;
  gap: 5px; padding-top: 11px; color: #B4AB9A; font-size: 11px; font-weight: 500; }
.nav button.active { color: var(--green); }

/* Utility */
.row { display: flex; align-items: center; }
.hairline-top { border-top: 1px solid #F0E9DA; }
input.plain { border: none; background: none; outline: none; font-family: inherit; }
a { color: var(--green); }