/* =========================================================================
 * app.css  —  Mobile-first, large touch targets, calm palette
 * ========================================================================= */
:root{
  --bg:#faf6f1; --card:#ffffff; --ink:#222222; --muted:#8a7f73;
  --brand:#FF8307; --brand-dk:#a8500a; --brand-tint:#fff2e4; --on-brand:#222222;
  --charcoal:#222222;
  --line:#ece4da;
  --go:#1f8a5b; --go-tint:#e7f4ec; --stop:#c0392b; --stop-tint:#fbe9e6;
  --warn:#c87a1e; --danger:#c0392b;
  --shadow:0 1px 3px rgba(0,0,0,.08); --r:14px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink); font-size:16px; line-height:1.45;
  padding-bottom:env(safe-area-inset-bottom);
}
#app{max-width:520px; margin:0 auto; min-height:100vh; display:flex; flex-direction:column}
.muted{color:var(--muted); font-size:.86em}

/* ---- app bar / goal ---- */
.appbar{position:sticky; top:0; z-index:10; background:var(--charcoal);
  color:#fff; padding:12px 16px calc(12px + env(safe-area-inset-top)); padding-top:calc(12px + env(safe-area-inset-top));
  box-shadow:var(--shadow)}
.appbar-row{display:flex; justify-content:space-between; align-items:center}
.brand{display:flex; align-items:center; gap:8px; font-weight:800; font-size:1.02rem; letter-spacing:.1px; color:#fff; white-space:nowrap}
.logo{width:28px; height:28px; display:block; flex:none}
.goal-chip{background:rgba(255,255,255,.14); color:#fff; padding:4px 10px; border-radius:999px; font-size:.8rem; font-weight:700}
.progressbar{height:8px; background:rgba(255,255,255,.20); border-radius:999px; margin-top:10px; overflow:hidden}
.progressbar span{display:block; height:100%; background:var(--brand); border-radius:999px; transition:width .4s}
.progressbar.big{height:12px; background:var(--line)} .progressbar.big span{background:var(--brand)}
.goal-sub{font-size:.78rem; margin-top:6px; opacity:.95}

/* ---- screen / cards ---- */
.screen{flex:1; padding:14px 14px 90px}
.card{background:var(--card); border-radius:var(--r); padding:14px; margin-bottom:14px; box-shadow:var(--shadow)}
.card h3{margin:0 0 10px; font-size:1rem}
.card h4{margin:0 0 6px; font-size:.92rem}

/* ---- date bar ---- */
.datebar{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;
  background:var(--card); border-radius:var(--r); padding:6px; box-shadow:var(--shadow)}
.datebar-mid{text-align:center; display:flex; flex-direction:column; line-height:1.2}
.ghost{background:none; border:1px solid var(--line); border-radius:10px; padding:8px 14px;
  font-size:1.1rem; color:var(--ink); min-width:44px; min-height:44px}

/* ---- banners ---- */
.banner{padding:12px 14px; border-radius:var(--r); margin-bottom:14px; font-weight:600; text-align:center}
.banner-go{background:var(--go-tint); color:var(--go)}
.banner-stop{background:var(--stop-tint); color:var(--stop)}

/* ---- quick stats ---- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.stat{text-align:center}
.stat-val{font-size:1.15rem; font-weight:700}
.stat-lbl{font-size:.72rem; color:var(--muted)}
.stat-tgt{font-size:.66rem}

/* ---- chips ---- */
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{border:1.5px solid var(--line); background:#fff; border-radius:999px; padding:10px 14px;
  font-size:.9rem; font-weight:600; color:var(--ink)}
.chip-done{background:var(--brand); color:var(--on-brand); border-color:var(--brand)}
.chip-off{opacity:.5}

/* ---- timeline ---- */
.timeline{display:flex; flex-direction:column}
.tl-row{display:grid; grid-template-columns:62px 28px 1fr; gap:8px; padding:8px 0; border-bottom:1px solid var(--line)}
.tl-row:last-child{border-bottom:none}
.tl-time{font-size:.78rem; color:var(--muted); font-weight:600; padding-top:2px}
.tl-icon{font-size:1.1rem; text-align:center}
.tl-title{font-weight:600; font-size:.92rem}
.tl-detail{font-size:.8rem; margin-top:2px}
.tl-past{opacity:.45}

/* ---- safety mini ---- */
.safety-mini{background:#fbf1e7; color:#8a5414; border-radius:var(--r); padding:12px 14px;
  font-size:.82rem; line-height:1.4}

/* ---- fields ---- */
.field{margin-bottom:14px}
.field label{display:block; font-size:.82rem; color:var(--muted); margin-bottom:6px; font-weight:600}
.field input,.field select,.notes{width:100%; padding:12px; border:1.5px solid var(--line);
  border-radius:10px; font-size:1rem; background:#fff; color:var(--ink)}
.notes{min-height:90px; resize:vertical; font-family:inherit}
.stepper-inline{display:flex; align-items:center; gap:10px}
.water-val{font-size:1.2rem; font-weight:700; min-width:48px; text-align:center}

/* ---- scale dots ---- */
.scale{display:flex; gap:6px; flex-wrap:wrap}
.dot{width:38px; height:38px; border-radius:50%; border:1.5px solid var(--line); background:#fff;
  font-weight:700; color:var(--ink)}
.dot-on{background:var(--brand); color:var(--on-brand); border-color:var(--brand)}
.dot-danger{background:var(--danger); border-color:var(--danger)}

/* ---- check grids ---- */
.checkgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:8px}
.check{padding:12px; border:1.5px solid var(--line); border-radius:10px; background:#fff;
  font-size:.86rem; font-weight:600; color:var(--ink); text-align:left}
.check-on{background:var(--brand-tint); border-color:var(--brand); color:var(--brand-dk)}

/* ---- plan content ---- */
.bullets{margin:6px 0 0; padding-left:20px} .bullets li{margin-bottom:5px; font-size:.9rem}
.bullets-danger li{color:var(--danger); font-weight:600}
.meal{border-top:1px solid var(--line); padding-top:10px; margin-top:10px}
.meal:first-of-type{border-top:none; margin-top:0}
.meal-head{display:flex; justify-content:space-between; align-items:baseline; gap:8px}
.grocery{padding:8px 0; border-bottom:1px solid var(--line)} .grocery:last-child{border-bottom:none}
.grocery-cat{font-weight:600; font-size:.88rem}
.tbl{width:100%; border-collapse:collapse; font-size:.86rem}
.tbl th,.tbl td{text-align:left; padding:8px 6px; border-bottom:1px solid var(--line); vertical-align:top}
.tbl th{font-size:.74rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted)}
.exercise{border-top:1px solid var(--line); padding:10px 0} .exercise:first-of-type{border-top:none}
.ex-head{display:flex; justify-content:space-between; align-items:baseline}
.reps{font-weight:700; color:var(--brand-dk)}
.warn{background:#fbf1e7; color:#8a5414; border-radius:10px; padding:10px 12px; margin-top:12px; font-size:.84rem}
.weekgrid{display:grid; grid-template-columns:repeat(7,1fr); gap:4px}
.weekday{text-align:center; border:1px solid var(--line); border-radius:8px; padding:6px 2px}
.wd-name{font-weight:700; font-size:.78rem}
.wd-plan{font-size:.62rem; line-height:1.15}

/* ---- progress ---- */
.big-goal{text-align:center}
.big-num{font-size:2rem; font-weight:800; color:var(--brand-dk)}
.spark{width:100%; height:120px; background:#f7faf9; border-radius:10px}
.spark-cap{text-align:center; margin-top:6px}
.callout{background:#f3f7f6; border-left:4px solid var(--brand); border-radius:8px; padding:10px 12px; margin-top:12px}
.callout-go{background:#e9f5f0}

/* ---- buttons ---- */
.btn{display:inline-block; width:100%; padding:13px; border-radius:10px; border:none;
  background:var(--brand); color:var(--on-brand); font-size:.95rem; font-weight:700; margin-top:8px; text-align:center}
.btn.ghost-btn{background:#fff; color:var(--brand-dk); border:1.5px solid var(--brand)}
label.btn{cursor:pointer}

/* ---- danger/warn cards ---- */
.card-danger{border-left:5px solid var(--danger)}
.card-warn{border-left:5px solid var(--warn); background:#fdf6ec}
.card-note{border-left:5px solid var(--muted); background:#f6f7f7}

/* ---- tab bar ---- */
.tabbar{position:fixed; bottom:0; left:0; right:0; max-width:520px; margin:0 auto; display:flex;
  background:#fff; border-top:1px solid var(--line); box-shadow:0 -1px 4px rgba(0,0,0,.05);
  padding-bottom:env(safe-area-inset-bottom); z-index:20}
.tab{flex:1; background:none; border:none; padding:8px 0 6px; display:flex; flex-direction:column;
  align-items:center; gap:2px; color:var(--muted); font-size:.68rem}
.tab-icon{font-size:1.2rem}
.tab.active{color:var(--brand-dk)} .tab.active .tab-label{font-weight:700}