  
<!DOCTYPE html>
<html xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml" lang="en-US"  lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<title>The Comeback — Sarah's 90-Day Rebuild</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<style>
  :root{
    --pine:#0e2a28;          /* deep base */
    --pine-2:#123634;        /* raised surface */
    --pine-3:#0a211f;        /* recessed */
    --line:rgba(255,255,255,.09);
    --cream:#f3efe4;         /* primary text */
    --muted:#9db3ad;         /* secondary text */
    --tang:#ff8b3d;          /* energy accent */
    --tang-deep:#f26a1b;
    --gold:#f4c04a;          /* achievements */
    --leaf:#5fd39b;          /* wins / positive */
    --red:#ff6b6b;
    --shadow:0 12px 30px rgba(0,0,0,.35);
    --r:18px;
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{margin:0;padding:0}
  body{
    font-family:"Inter",system-ui,-apple-system,sans-serif;
    background:
      radial-gradient(1200px 600px at 80% -10%, rgba(255,139,61,.14), transparent 60%),
      radial-gradient(900px 500px at -10% 10%, rgba(95,211,155,.10), transparent 55%),
      var(--pine);
    color:var(--cream);
    -webkit-font-smoothing:antialiased;
    padding-bottom:104px;
    min-height:100vh;
  }
  .wrap{max-width:520px;margin:0 auto;padding:0 16px}
  .anton{font-family:"Anton",Impact,sans-serif;font-weight:400;letter-spacing:.5px}
  .eyebrow{font-family:"Anton",sans-serif;letter-spacing:2px;text-transform:uppercase;font-size:12px;color:var(--tang)}
  h2.sec{font-family:"Anton",sans-serif;font-weight:400;letter-spacing:.5px;font-size:26px;margin:26px 2px 12px;text-transform:uppercase}
  .muted{color:var(--muted)}
  button{font-family:inherit;cursor:pointer;border:none;color:inherit}

  /* ---------- TOP BAR ---------- */
  header{position:sticky;top:0;z-index:40;backdrop-filter:blur(10px);
    background:linear-gradient(180deg, rgba(10,33,31,.92), rgba(10,33,31,.55) 70%, transparent);
    padding:14px 0 10px}
  .brand{display:flex;align-items:center;gap:10px}
  .flame{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
    background:linear-gradient(135deg,var(--tang),var(--tang-deep));box-shadow:0 6px 16px rgba(242,106,27,.4);font-size:19px}
  .brand h1{font-family:"Anton",sans-serif;font-weight:400;font-size:20px;margin:0;letter-spacing:1px;text-transform:uppercase;line-height:1}
  .brand small{display:block;color:var(--muted);font-size:11px;letter-spacing:1.5px;font-family:"Anton",sans-serif;text-transform:uppercase}

  /* ---------- SCOREBOARD HERO ---------- */
  .board{position:relative;margin-top:6px;border-radius:24px;overflow:hidden;
    background:linear-gradient(160deg,var(--pine-2),var(--pine-3));border:1px solid var(--line);box-shadow:var(--shadow)}
  .board::before{content:"";position:absolute;inset:0;background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 46px);pointer-events:none}
  .board-top{display:flex;justify-content:space-between;align-items:flex-start;padding:18px 18px 6px}
  .chapter-tag{font-family:"Anton",sans-serif;text-transform:uppercase;letter-spacing:1.5px;font-size:12px;
    color:var(--pine);background:var(--gold);padding:5px 10px;border-radius:999px}
  .board-day{padding:2px 18px 4px;text-align:center}
  .board-day .num{font-family:"Anton",sans-serif;font-size:78px;line-height:.9;color:var(--cream)}
  .board-day .num span{color:var(--tang)}
  .board-day .of{font-family:"Anton",sans-serif;letter-spacing:3px;color:var(--muted);font-size:13px;text-transform:uppercase}
  .board-stats{display:grid;grid-template-columns:1fr 1fr 1fr;border-top:1px solid var(--line);margin-top:8px}
  .bstat{padding:14px 8px;text-align:center;border-right:1px solid var(--line)}
  .bstat:last-child{border-right:none}
  .bstat .v{font-family:"Anton",sans-serif;font-size:26px;line-height:1}
  .bstat .v.leaf{color:var(--leaf)} .bstat .v.tang{color:var(--tang)} .bstat .v.gold{color:var(--gold)}
  .bstat .l{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-top:5px;font-family:"Anton",sans-serif}

  .pep{margin:14px 2px 2px;padding:14px 16px;border-radius:16px;background:linear-gradient(135deg,rgba(255,139,61,.16),rgba(95,211,155,.10));
    border:1px solid var(--line);font-size:15px;line-height:1.4}
  .pep b{color:var(--tang)}

  /* ---------- CARDS ---------- */
  .card{background:var(--pine-2);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-top:14px;box-shadow:var(--shadow)}
  .card h3{margin:0 0 4px;font-family:"Anton",sans-serif;font-weight:400;letter-spacing:.5px;font-size:18px;text-transform:uppercase}
  .row{display:flex;gap:10px}
  .row>*{flex:1}

  /* today's session */
  .session .badge-focus{display:inline-block;font-family:"Anton",sans-serif;letter-spacing:1px;text-transform:uppercase;
    font-size:11px;color:var(--tang);border:1px solid rgba(255,139,61,.4);padding:3px 9px;border-radius:999px;margin-bottom:8px}
  .ex{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:14.5px}
  .ex:last-child{border-bottom:none}
  .ex .n{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}

  /* ---------- CHECK-IN FORM ---------- */
  label.fld{display:block;margin-top:12px}
  label.fld .cap{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);font-family:"Anton",sans-serif;margin-bottom:6px;display:block}
  input[type=text],input[type=number],input[type=date],textarea,select{
    width:100%;background:var(--pine-3);border:1px solid var(--line);border-radius:12px;color:var(--cream);
    padding:12px 13px;font-size:16px;font-family:inherit;outline:none}
  input:focus,textarea:focus,select:focus{border-color:var(--tang);box-shadow:0 0 0 3px rgba(255,139,61,.15)}
  textarea{resize:vertical;min-height:56px}
  .seg{display:flex;gap:8px;flex-wrap:wrap}
  .seg button{flex:1;min-width:64px;background:var(--pine-3);border:1px solid var(--line);border-radius:12px;padding:11px 6px;
    font-weight:700;font-size:14px;color:var(--muted);transition:.15s}
  .seg button.on{background:linear-gradient(135deg,var(--tang),var(--tang-deep));color:#231; border-color:transparent;color:#2a1400}
  .seg.leaf button.on{background:linear-gradient(135deg,var(--leaf),#39b57c);color:#052}
  .dots{display:flex;gap:8px}
  .dots button{flex:1;aspect-ratio:1;max-width:56px;border-radius:12px;background:var(--pine-3);border:1px solid var(--line);
    font-family:"Anton",sans-serif;font-size:20px;color:var(--muted)}
  .dots button.on{background:linear-gradient(135deg,var(--leaf),#39b57c);color:#043;border-color:transparent}
  input[type=range]{width:100%;accent-color:var(--tang);height:26px}
  .energy-val{font-family:"Anton",sans-serif;font-size:22px;color:var(--tang)}
  .save{margin-top:16px;width:100%;padding:16px;border-radius:14px;font-family:"Anton",sans-serif;letter-spacing:1px;
    font-size:18px;text-transform:uppercase;color:#2a1400;background:linear-gradient(135deg,var(--tang),var(--tang-deep));
    box-shadow:0 10px 24px rgba(242,106,27,.35);transition:.15s}
  .save:active{transform:translateY(2px)}
  .saved-note{text-align:center;color:var(--leaf);font-size:13px;margin-top:10px;min-height:16px;font-weight:600}

  /* ---------- PROGRESS ---------- */
  .track-wrap{position:relative;padding:20px 16px 16px;background:var(--pine-2);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
  .lane{position:relative;height:64px;border-radius:14px;overflow:hidden;
    background:repeating-linear-gradient(90deg,#153c39 0 40px,#123634 40px 80px);border:1px solid var(--line)}
  .lane .dash{position:absolute;top:50%;left:0;right:0;height:0;border-top:3px dashed rgba(255,255,255,.25);transform:translateY(-50%)}
  .runner{position:absolute;top:50%;transform:translate(-50%,-50%);font-size:30px;transition:left .8s cubic-bezier(.3,1.2,.4,1);filter:drop-shadow(0 4px 6px rgba(0,0,0,.4))}
  .finish{position:absolute;top:0;bottom:0;width:12px;right:0;background:
    repeating-conic-gradient(#fff 0 25%, #111 0 50%) 0 0/12px 12px}
  .lane-labels{display:flex;justify-content:space-between;margin-top:8px;font-family:"Anton",sans-serif;font-size:13px;color:var(--muted)}
  .lane-labels b{color:var(--cream)}

  .stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
  .stat{background:var(--pine-2);border:1px solid var(--line);border-radius:16px;padding:15px;box-shadow:var(--shadow)}
  .stat .v{font-family:"Anton",sans-serif;font-size:30px;line-height:1}
  .stat .l{font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);font-family:"Anton",sans-serif;margin-top:6px}
  .stat .v.tang{color:var(--tang)} .stat .v.leaf{color:var(--leaf)} .stat .v.gold{color:var(--gold)}

  .chart{width:100%;height:190px;margin-top:6px;display:block}
  .chart-empty{color:var(--muted);text-align:center;padding:34px 10px;font-size:14px}

  /* badges */
  .badge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:6px}
  .bg{aspect-ratio:1;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
    background:var(--pine-3);border:1px solid var(--line);text-align:center;padding:8px;position:relative}
  .bg .ico{font-size:26px;filter:grayscale(1) opacity(.35)}
  .bg .nm{font-size:10px;letter-spacing:.5px;color:var(--muted);line-height:1.15;font-weight:700;text-transform:uppercase}
  .bg.earned{background:linear-gradient(160deg,rgba(244,192,74,.18),var(--pine-3));border-color:rgba(244,192,74,.45)}
  .bg.earned .ico{filter:none}
  .bg.earned .nm{color:var(--gold)}

  .milestones{margin-top:6px}
  .mile{display:flex;align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid var(--line)}
  .mile:last-child{border-bottom:none}
  .mile .chk{width:26px;height:26px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;flex:none;font-size:14px;color:var(--muted)}
  .mile.hit .chk{background:var(--leaf);border-color:var(--leaf);color:#043}
  .mile .w{font-family:"Anton",sans-serif;font-size:18px;width:64px;flex:none}
  .mile.hit .w{color:var(--leaf)}
  .mile .lbl{color:var(--muted);font-size:13px}
  .mile.hit .lbl{color:var(--cream)}

  /* ---------- PLAN / TRAIN / FUEL ---------- */
  .chapter{border-left:3px solid var(--tang);padding:2px 0 2px 16px;margin:16px 0}
  .chapter.c2{border-color:var(--gold)} .chapter.c3{border-color:var(--leaf)}
  .chapter .ch-n{font-family:"Anton",sans-serif;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
  .chapter h3{margin:2px 0 4px;font-family:"Anton",sans-serif;font-weight:400;font-size:22px;text-transform:uppercase}
  .chapter p{margin:6px 0;font-size:14.5px;line-height:1.5;color:#cfe0db}
  .chapter ul{margin:8px 0 0;padding-left:18px} .chapter li{margin:5px 0;font-size:14px;color:#cfe0db}

  .guard{background:linear-gradient(135deg,rgba(255,107,107,.12),rgba(255,139,61,.08));border:1px solid rgba(255,107,107,.3)}
  .guard h3{color:var(--red)}
  .rule-flag{display:inline-flex;gap:6px;align-items:center;background:var(--pine-3);border:1px solid var(--line);
    border-radius:999px;padding:6px 12px;font-size:12px;font-weight:700;margin:4px 6px 4px 0}

  .acc{border:1px solid var(--line);border-radius:14px;margin-top:10px;overflow:hidden;background:var(--pine-2)}
  .acc summary{list-style:none;cursor:pointer;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;gap:10px}
  .acc summary::-webkit-details-marker{display:none}
  .acc .dfocus{font-family:"Anton",sans-serif;font-size:16px;text-transform:uppercase}
  .acc .dmeta{font-size:11px;color:var(--muted);letter-spacing:1px;font-family:"Anton",sans-serif;text-transform:uppercase}
  .acc[open]{border-color:rgba(255,139,61,.4)}
  .acc.today{border-color:var(--tang);box-shadow:0 0 0 3px rgba(255,139,61,.12)}
  .acc .body{padding:0 16px 14px}
  .chev{transition:.2s;color:var(--tang)}
  .acc[open] .chev{transform:rotate(180deg)}
  .tdy-pill{font-family:"Anton",sans-serif;font-size:10px;color:#2a1400;background:var(--tang);padding:2px 8px;border-radius:999px;letter-spacing:1px}

  .meal h4{font-family:"Anton",sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.5px;font-size:15px;margin:14px 0 4px;color:var(--tang)}
  .opt{background:var(--pine-3);border:1px solid var(--line);border-radius:12px;padding:11px 13px;margin-top:8px}
  .opt b{display:block;margin-bottom:3px;font-size:14px}
  .opt span{font-size:13px;color:var(--muted);line-height:1.5}

  /* ---------- NAV ---------- */
  nav{position:fixed;bottom:0;left:0;right:0;z-index:50;background:rgba(9,29,27,.92);backdrop-filter:blur(14px);
    border-top:1px solid var(--line);padding:8px 0 max(8px,env(safe-area-inset-bottom));display:flex;justify-content:center}
  .nav-inner{display:flex;width:100%;max-width:520px;padding:0 6px}
  .nav-inner button{flex:1;background:none;padding:6px 2px;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--muted);font-size:10px;letter-spacing:.5px;font-weight:700;text-transform:uppercase;font-family:"Anton",sans-serif}
  .nav-inner button svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .nav-inner button.on{color:var(--tang)}
  .nav-inner button.on svg{stroke:var(--tang)}

  .tab{display:none;animation:fade .3s ease}
  .tab.on{display:block}
  @keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

  /* ---------- TOAST / MODAL ---------- */
  .toast{position:fixed;left:50%;bottom:118px;transform:translateX(-50%) translateY(30px);opacity:0;pointer-events:none;
    background:var(--leaf);color:#043;font-weight:800;padding:12px 20px;border-radius:999px;z-index:80;transition:.35s;box-shadow:var(--shadow);font-size:14px}
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

  .modal-bg{position:fixed;inset:0;background:rgba(4,15,14,.82);z-index:90;display:none;align-items:center;justify-content:center;padding:24px}
  .modal-bg.show{display:flex}
  .modal{background:linear-gradient(160deg,var(--pine-2),var(--pine-3));border:1px solid rgba(244,192,74,.4);border-radius:24px;
    padding:26px 22px;text-align:center;max-width:360px;width:100%;box-shadow:var(--shadow);position:relative;overflow:hidden}
  .modal .pop{font-family:"Anton",sans-serif;font-size:14px;letter-spacing:2px;color:var(--gold);text-transform:uppercase}
  .modal h2{font-family:"Anton",sans-serif;font-weight:400;font-size:26px;margin:6px 0 16px;text-transform:uppercase}
  .modal .newbadge{display:flex;align-items:center;gap:12px;text-align:left;background:var(--pine-3);border:1px solid rgba(244,192,74,.4);border-radius:14px;padding:12px;margin:8px 0}
  .modal .newbadge .ico{font-size:30px}
  .modal .newbadge b{display:block;color:var(--gold);font-size:15px}
  .modal .newbadge small{color:var(--muted)}
  .modal button.close{margin-top:16px;width:100%;padding:13px;border-radius:12px;font-family:"Anton",sans-serif;letter-spacing:1px;
    font-size:16px;text-transform:uppercase;background:var(--gold);color:#2a1e00}
  .confetti{position:absolute;width:9px;height:14px;top:-20px;opacity:.9;animation:fall linear forwards}
  @keyframes fall{to{transform:translateY(420px) rotate(540deg);opacity:0}}

  .goalset{display:flex;gap:8px;align-items:center;margin-top:8px}
  .goalset input{max-width:110px}
  .linkbtn{background:none;color:var(--tang);text-decoration:underline;font-weight:700;font-size:13px;padding:0}
  @media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}
</style>
</head>
<body>

<header>
  <div class="wrap brand">
    <div class="flame">🔥</div>
    <div>
      <h1>The Comeback</h1>
      <small id="dateline">Loading…</small>
    </div>
  </div>
</header>

<main class="wrap">

<!-- ================= TODAY ================= -->
<section class="tab on" id="tab-today">
  <div class="board">
    <div class="board-top">
      <span class="chapter-tag" id="chapterTag">Chapter 1</span>
      <span class="eyebrow" id="todayName">—</span>
    </div>
    <div class="board-day">
      <div class="num"><span id="dayNum">1</span></div>
      <div class="of">Day / 90 · The Rebuild</div>
    </div>
    <div class="board-stats">
      <div class="bstat"><div class="v tang" id="hStreak">0</div><div class="l">Day Streak 🔥</div></div>
      <div class="bstat"><div class="v leaf" id="hDown">0</div><div class="l">Lbs Down</div></div>
      <div class="bstat"><div class="v gold" id="hWorkouts">0</div><div class="l">Sessions</div></div>
    </div>
  </div>

  <div class="pep" id="pep">Every rep is a vote for the athlete you're becoming.</div>

  <div class="card session">
    <span class="badge-focus" id="sessFocus">Today's Session</span>
    <h3 id="sessTitle">Session</h3>
    <div id="sessList"></div>
    <p class="muted" id="sessNote" style="font-size:13px;margin:10px 0 0;line-height:1.5"></p>
  </div>

  <div class="card">
    <h3>Daily Check-In</h3>
    <label class="fld"><span class="cap">Date</span><input type="date" id="ciDate"></label>
    <div class="row">
      <label class="fld"><span class="cap">Weight (lb)</span><input type="number" inputmode="decimal" id="ciWeight" placeholder="—" step="0.1"></label>
      <label class="fld"><span class="cap">Steps</span><input type="number" inputmode="numeric" id="ciSteps" placeholder="—"></label>
    </div>
    <div class="row">
      <label class="fld"><span class="cap">Workout</span><input type="text" id="ciWType" placeholder="Strength, walk, pool…"></label>
      <label class="fld" style="max-width:34%"><span class="cap">Minutes</span><input type="number" inputmode="numeric" id="ciWMin" placeholder="—"></label>
    </div>

    <label class="fld"><span class="cap">Protein meals hit</span></label>
    <div class="dots" id="ciProtein">
      <button data-v="0">0</button><button data-v="1">1</button><button data-v="2">2</button><button data-v="3">3</button>
    </div>

    <label class="fld"><span class="cap">Dessert</span></label>
    <div class="seg" id="ciDessert">
      <button data-v="none">None</button>
      <button data-v="planned">Planned ✓</button>
      <button data-v="off">Off-plan</button>
    </div>

    <label class="fld"><span class="cap">Energy — <span class="energy-val" id="enVal">6</span>/10</span>
      <input type="range" id="ciEnergy" min="1" max="10" value="6"></label>

    <label class="fld"><span class="cap">Win of the day</span>
      <input type="text" id="ciWin" placeholder="One thing that went right today…"></label>

    <button class="save" id="saveBtn">Log It 💪</button>
    <div class="saved-note" id="savedNote"></div>
  </div>
</section>

<!-- ================= PROGRESS ================= -->
<section class="tab" id="tab-progress">
  <h2 class="sec">The Track</h2>
  <div class="track-wrap">
    <div class="lane">
      <div class="dash"></div>
      <div class="finish"></div>
      <div class="runner" id="runner" style="left:2%">🏃‍♀️</div>
    </div>
    <div class="lane-labels">
      <span>Start <b id="lStart">240</b></span>
      <span id="lNow">Now —</span>
      <span id="lGoalLabel">Set a goal →</span>
    </div>
    <div class="goalset">
      <span class="muted" style="font-size:13px">Goal weight:</span>
      <input type="number" inputmode="decimal" id="goalInput" placeholder="opt.">
      <button class="linkbtn" id="goalSave">save</button>
    </div>
  </div>

  <div class="stat-grid">
    <div class="stat"><div class="v tang" id="sStreakBest">0</div><div class="l">Best Streak</div></div>
    <div class="stat"><div class="v leaf" id="sMinutes">0</div><div class="l">Total Minutes Moved</div></div>
    <div class="stat"><div class="v gold" id="sSteps">0</div><div class="l">Total Steps</div></div>
    <div class="stat"><div class="v" id="sProtein">0%</div><div class="l">Protein Consistency</div></div>
  </div>

  <h2 class="sec">Weigh-In Trend</h2>
  <div class="card" style="padding:14px 8px 8px">
    <svg class="chart" id="chart" viewBox="0 0 320 190" preserveAspectRatio="none" aria-label="Weight trend"></svg>
    <div class="chart-empty" id="chartEmpty">Log a few weigh-ins and your line shows up here.</div>
  </div>

  <h2 class="sec">Milestones</h2>
  <div class="card milestones" id="mileList"></div>

  <h2 class="sec">Trophy Case</h2>
  <div class="card">
    <div class="badge-grid" id="badgeGrid"></div>
  </div>
</section>

<!-- ================= PLAN ================= -->
<section class="tab" id="tab-plan">
  <h2 class="sec">The 90-Day Arc</h2>
  <p class="muted" style="font-size:14px;line-height:1.5;margin:0 6px">Three chapters, thirty days each. Same weekly rhythm all the way through — what changes is how much you ask of yourself. Finish the arc, then run it back with heavier weights and longer legs.</p>

  <div class="chapter c1">
    <div class="ch-n">Chapter 1 · Days 1–30</div>
    <h3>Foundation</h3>
    <p>The whole game right now is <b>showing up</b>. Groove the 7–8 AM slot until it's automatic. Nail protein at every meal. Move every day even when it's just a walk.</p>
    <ul>
      <li>3 strength days + daily walking, no misses on the check-in</li>
      <li>Protein at all 3 meals — this is your #1 lever</li>
      <li>Learn your pain-free ranges; log energy honestly</li>
      <li>Target: a 7-day streak before Day 14</li>
    </ul>
  </div>

  <div class="chapter c2">
    <div class="ch-n">Chapter 2 · Days 31–60</div>
    <h3>Build</h3>
    <p>Habit's set — now add load. When every rep feels controlled, <b>nudge the weight up</b>. Add 5 minutes to walks that feel easy. Dessert stays planned, not grazed.</p>
    <ul>
      <li>Progressive overload: heavier or +1 rep when form is clean</li>
      <li>Stretch cardio duration before intensity</li>
      <li>Tighten the dessert habit — planned beats impulse</li>
      <li>Target: 20 total sessions logged by Day 60</li>
    </ul>
  </div>

  <div class="chapter c3">
    <div class="ch-n">Chapter 3 · Days 61–90</div>
    <h3>Momentum</h3>
    <p>Conditioning is coming back. Longer easy cardio, a carry or finisher on strength days, streaks stacked deep. You'll feel <b>athletic</b> again — that's the whole point.</p>
    <ul>
      <li>Extend Saturday long-easy sessions past 60 min</li>
      <li>Add farmer carries / finishers where you have gas</li>
      <li>Reassess around the mid-year mark to reintroduce running & fish</li>
      <li>Target: finish 90 with your longest streak yet</li>
    </ul>
  </div>

  <div class="card">
    <h3>Ground Rules (your call)</h3>
    <div style="margin-top:8px">
      <span class="rule-flag">🚫🐟 No fish for now</span>
      <span class="rule-flag">🚫🏃 No extensive running yet</span>
      <span class="rule-flag">✅🚶 Walking</span>
      <span class="rule-flag">✅🤸 Bodyweight</span>
      <span class="rule-flag">✅🏋️ Weights</span>
    </div>
    <p class="muted" style="font-size:13px;line-height:1.5;margin-top:12px">Fish and real running stay off the table through the first half of the year to protect your knees & plantar fascia. Revisit both at the mid-year checkpoint — reintroduce running slowly (run/walk intervals) only if joints are happy.</p>
  </div>

  <div class="card guard">
    <h3>Guardrails</h3>
    <p style="font-size:14px;line-height:1.55;margin:8px 0 0;color:#e7d3c8">
      <b>Pain rule:</b> muscle burn is expected — sharp or worsening joint/foot pain means modify or stop.<br><br>
      <b>Progression rule:</b> only add weight or minutes once the current dose feels controlled.<br><br>
      <b>Missed-day rule:</b> one skip is not a hole to dig out of. Never double up — just run the next day on schedule. A less-than-perfect meal never changes the next one.
    </p>
  </div>
</section>

<!-- ================= TRAIN ================= -->
<section class="tab" id="tab-train">
  <h2 class="sec">Weekly Split</h2>
  <p class="muted" style="font-size:14px;margin:0 6px 4px">Daily movement, 3 true strength days, most sessions in the 7–8 AM window. Low-impact cardio whenever knees or feet are talking to you.</p>
  <div id="trainList"></div>
</section>

<!-- ================= FUEL ================= -->
<section class="tab" id="tab-fuel">
  <h2 class="sec">Fuel</h2>
  <p class="muted" style="font-size:14px;margin:0 6px 4px">No tracking apps. Build every day around high-protein meals, intentional carbs, vegetables, and one planned treat.</p>

  <div class="card meal">
    <h3>Breakfast — after training</h3>
    <p class="muted" style="font-size:13px;margin:2px 0 0">Goal: 30–40g protein</p>
    <h4>Option 1 · Greek Yogurt Bowl</h4>
    <div class="opt"><span>1 cup Greek yogurt · berries · 1 scoop protein · small handful of granola</span></div>
    <h4>Option 2 · Egg Scramble</h4>
    <div class="opt"><span>2–3 eggs · spinach and/or peppers · 1 slice toast · avocado</span></div>
    <h4>Option 3 · Protein Smoothie</h4>
    <div class="opt"><span>Protein powder · frozen berries · spinach · almond milk · chia seeds</span></div>
  </div>

  <div class="card meal">
    <h3>Lunch — build a bowl</h3>
    <div class="opt"><b>Base</b><span>Greens or chopped vegetables</span></div>
    <div class="opt"><b>Protein</b><span>Chicken, turkey, steak, tofu, or ground turkey <em>(no fish for now)</em></span></div>
    <div class="opt"><b>Extras</b><span>Avocado or nuts · olive-oil dressing · optional controlled scoop of rice, beans, or quinoa</span></div>
  </div>

  <div class="card meal">
    <h3>Dinner — flexible plate</h3>
    <div class="opt"><span>½ plate veg or salad · ¼ plate protein · ¼ plate starch. For pizza / pasta / burgers / burritos: keep the meal, control the portion, protein first, add a side salad, and don't graze all evening.</span></div>
  </div>

  <div class="card meal">
    <h3>Snacks & dessert</h3>
    <div class="opt"><span>Protein smoothie or protein-forward snack when genuinely hungry. <b style="color:var(--tang)">Plan</b> dessert — one serving of a donut, chocolate, or cake beats mindless grazing. Coffee, Coke Zero & Alani can fit; water stays the main drink.</span></div>
  </div>

  <div class="card">
    <h3>The 5 Rules</h3>
    <p style="font-size:14px;line-height:1.7;margin:8px 0 0">
      1 · Protein at every main meal<br>
      2 · Vegetables at lunch and dinner<br>
      3 · Carbs are allowed — portion them on purpose<br>
      4 · One planned dessert beats unplanned snacking<br>
      5 · One off meal never changes the next — return to the template
    </p>
  </div>
</section>

</main>

<div class="toast" id="toast"></div>

<div class="modal-bg" id="modalBg">
  <div class="modal" id="modal">
    <div class="pop">Achievement Unlocked</div>
    <h2 id="modalTitle">Nice work!</h2>
    <div id="modalBadges"></div>
    <button class="close" id="modalClose">Keep Going</button>
  </div>
</div>

<nav>
  <div class="nav-inner">
    <button class="on" data-tab="today"><svg viewBox="0 0 24 24"><path d="M3 12l9-9 9 9"/><path d="M5 10v10h14V10"/></svg>Today</button>
    <button data-tab="progress"><svg viewBox="0 0 24 24"><path d="M3 3v18h18"/><path d="M7 14l3-3 3 3 4-6"/></svg>Progress</button>
    <button data-tab="plan"><svg viewBox="0 0 24 24"><path d="M4 4h16v16H4z"/><path d="M8 9h8M8 13h8M8 17h5"/></svg>Plan</button>
    <button data-tab="train"><svg viewBox="0 0 24 24"><path d="M6 8v8M18 8v8M3 10v4M21 10v4M6 12h12"/></svg>Train</button>
    <button data-tab="fuel"><svg viewBox="0 0 24 24"><path d="M6 3v18M6 3c3 0 3 5 0 5M14 3v7a3 3 0 006 0V3M17 10v11"/></svg>Fuel</button>
  </div>
</nav>

<script>
"use strict";
const KEY = "sarah_comeback_v1";
const START_WEIGHT = 240;
const START_DATE = "2026-08-17";   // Day 1 = Monday, Aug 17, 2026

/* ---------- data + storage ---------- */
let data = null;
let memoryFallback = false;

function todayStr(d=new Date()){
  return d.getFullYear()+"-"+String(d.getMonth()+1).padStart(2,"0")+"-"+String(d.getDate()).padStart(2,"0");
}
function parseDate(s){const[y,m,d]=s.split("-").map(Number);return new Date(y,m-1,d);}
function daysBetween(a,b){return Math.round((parseDate(b)-parseDate(a))/86400000);}

function freshData(){
  return {version:1,startDate:START_DATE,startWeight:START_WEIGHT,goalWeight:null,checkins:{},earnedBadges:{}};
}

function load(){
  try{
    var raw = localStorage.getItem(KEY);
    if(raw){ data = JSON.parse(raw); }
  }catch(e){ /* private mode / storage blocked */ }
  if(!data){ data = freshData(); }
  // migrate missing fields
  data.startWeight = data.startWeight || START_WEIGHT;
  data.startDate = START_DATE;   // pin Day 1 to Aug 17, 2026
  data.checkins = data.checkins || {};
  data.earnedBadges = data.earnedBadges || {};
  save();
}
function save(){
  try{ localStorage.setItem(KEY, JSON.stringify(data)); }
  catch(e){ memoryFallback = true; }
}

/* ---------- workout content ---------- */
const SPLIT = {
  1:{focus:"Full Body Strength",meta:"~60 min",note:"If knees/feet are irritated, swap walking lunges for a machine leg press or short-range split squat.",
     ex:[["Warm-up · treadmill walk + mobility","10 min"],["Goblet Squat","3 × 12"],["Dumbbell Bench Press","3 × 12"],["Seated Cable Row","3 × 12"],["Walking Lunges","3 × 10/leg"],["Plank","3 × 30s"],["Finish · incline walk","15 min"]]},
  2:{focus:"Cardio + Core",meta:"45–60 min",note:"Keep cardio at a sustainable, conversational pace.",
     ex:[["Warm-up · easy movement","5–10 min"],["Pick one: trail/incline walk, bike, elliptical, pool","35–45 min"],["Dead Bug","3 × 10/side"],["Bird Dog","3 × 10/side"],["Side Plank","3 × 20–30s/side"],["Finish · calf & foot mobility","5 min"]]},
  3:{focus:"Lower Body + Mobility",meta:"~60 min",note:"Stay in pain-free ranges. Sub step-ups for another low-impact leg move if needed.",
     ex:[["Warm-up · bike/treadmill + hip/ankle","10 min"],["Leg Press or Goblet Squat","3 × 10–12"],["Romanian Deadlift","3 × 10–12"],["Step-Ups","3 × 8–10/leg"],["Glute Bridge / Hip Thrust","3 × 12"],["Hamstring Curl","3 × 12"],["Finish · easy bike or walk","10–15 min"]]},
  4:{focus:"Cardio / Pool + Core",meta:"45–60 min",note:"Pool days are gold for the joints — use them freely.",
     ex:[["Warm-up · easy movement","5–10 min"],["A: swim laps / water walk","30–40 min"],["B: bike or elliptical","35–45 min"],["Pallof Press","3 × 10/side"],["Plank","3 × 30–45s"],["Finish · easy stretch","5–10 min"]]},
  5:{focus:"Full Body Strength",meta:"~60 min",note:"Your second true strength day — push weight up when form is clean.",
     ex:[["Warm-up · treadmill/bike + mobility","10 min"],["Chest Press (DB/machine)","3 × 10–12"],["Lat Pulldown","3 × 10–12"],["DB Romanian Deadlift","3 × 10"],["Leg Press or Box Squat","3 × 10–12"],["Seated DB Shoulder Press","3 × 10"],["Cable Row","3 × 10–12"],["Farmer Carry","3 × 30–45s"]]},
  6:{focus:"Long Easy Cardio",meta:"45–60+ min",note:"Endurance day — not a max effort. Stay conversational the whole time.",
     ex:[["Pick one: trail/treadmill walk, bike, swim, or a mix","45–60+ min"],["Keep it easy & steady","—"]]},
  0:{focus:"Active Recovery",meta:"30–60 min",note:"Finish feeling better than you started.",
     ex:[["Easy walk, relaxed swim, gentle mobility, or stretch","30–60 min"],["Keep intensity low","—"]]}
};
const DAYNAMES=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];

/* ---------- pep talk ---------- */
const PEPS=[
  "Every rep is a vote for the athlete you're becoming.",
  "You don't have to be perfect. You have to be <b>consistent</b>.",
  "Show up at 7 AM and the rest takes care of itself.",
  "Protein, water, one good walk. That's a winning day.",
  "The scale is one number. Your streak is the whole story.",
  "Knees first, ego second — smart training is what lasts.",
  "You've done hard things before. This is just the next one.",
  "Slow progress is still progress the couch will never make.",
  "Plan the treat, enjoy the treat, move on. No guilt.",
  "Comebacks aren't loud. They're 90 quiet mornings in a row."
];
function streakPep(s){
  if(s>=30) return "🔥 "+s+"-day streak. You're not starting over anymore — you're <b>built different</b>.";
  if(s>=14) return "🔥 "+s+" days straight. This is officially a habit, not an experiment.";
  if(s>=7)  return "🔥 A full week logged. <b>Momentum</b> is on your side now.";
  if(s>=3)  return "🔥 "+s+" days in a row — the hardest part is already behind you.";
  return null;
}

/* ---------- badges ---------- */
const BADGES=[
  {id:"first",   ic:"👟",nm:"First Step",   ds:"Logged your first check-in",     t:(s)=>s.total>=1},
  {id:"warm",    ic:"🌅",nm:"Warm Up",      ds:"3-day streak",                   t:(s)=>s.bestStreak>=3},
  {id:"locked",  ic:"🔒",nm:"Locked In",    ds:"7-day streak",                   t:(s)=>s.bestStreak>=7},
  {id:"iron",    ic:"⚙️",nm:"Iron Habit",   ds:"14-day streak",                  t:(s)=>s.bestStreak>=14},
  {id:"unstop",  ic:"🚀",nm:"Unstoppable",  ds:"30-day streak",                  t:(s)=>s.bestStreak>=30},
  {id:"strong",  ic:"🏋️",nm:"Strong Start", ds:"First strength session",         t:(s)=>s.strengthDays>=1},
  {id:"ten",     ic:"🔟",nm:"Perfect Ten",  ds:"10 sessions logged",             t:(s)=>s.workouts>=10},
  {id:"quarter", ic:"🥉",nm:"Twenty-Five",  ds:"25 sessions logged",             t:(s)=>s.workouts>=25},
  {id:"half",    ic:"🥈",nm:"Fifty Club",   ds:"50 sessions logged",             t:(s)=>s.workouts>=50},
  {id:"protein", ic:"🍗",nm:"Protein Pro",  ds:"7 days of 3/3 protein",          t:(s)=>s.proteinPerfect>=7},
  {id:"five",    ic:"⚖️",nm:"Down a Notch", ds:"5 lbs down from start",          t:(s)=>s.lbsDown>=5},
  {id:"tenlb",   ic:"🎯",nm:"Ten Pounds",   ds:"10 lbs down from start",         t:(s)=>s.lbsDown>=10},
  {id:"steps",   ic:"👣",nm:"Step Master",  ds:"A 10k+ step day",                t:(s)=>s.maxSteps>=10000},
  {id:"energy",  ic:"⚡",nm:"Energized",    ds:"Felt 8+ energy five times",      t:(s)=>s.energy8>=5},
  {id:"grad",    ic:"🏆",nm:"90-Day Grad",  ds:"Reached Day 90",                 t:(s)=>s.dayNum>=90}
];

/* ---------- stats ---------- */
function computeStats(){
  const ci=data.checkins, keys=Object.keys(ci).sort();
  let workouts=0,strengthDays=0,minutes=0,steps=0,maxSteps=0,proteinPerfect=0,proteinLogged=0,energy8=0;
  keys.forEach(k=>{
    const e=ci[k];
    if(e.wType && e.wType.trim()) workouts++;
    if(e.wType && /strength|weight|lift|full body|lower|upper/i.test(e.wType)) strengthDays++;
    minutes+=Number(e.wMin)||0;
    const st=Number(e.steps)||0; steps+=st; if(st>maxSteps)maxSteps=st;
    if(e.protein!=null){proteinLogged++; if(e.protein==3)proteinPerfect++;}
    if(Number(e.energy)>=8)energy8++;
  });
  // latest weight
  let latestWeight=null,latestDate=null;
  keys.forEach(k=>{ if(ci[k].weight!=null && ci[k].weight!=="") {latestWeight=Number(ci[k].weight);latestDate=k;} });
  const lbsDown = latestWeight!=null ? (data.startWeight-latestWeight) : 0;

  // streaks (consecutive days with a check-in, ending today or yesterday)
  const has=new Set(keys);
  function streakEndingAt(startS){
    let n=0,d=parseDate(startS);
    while(has.has(todayStr(d))){n++;d.setDate(d.getDate()-1);}
    return n;
  }
  let curStreak=streakEndingAt(todayStr());
  if(curStreak===0){const y=new Date();y.setDate(y.getDate()-1);curStreak=0;} // current is 0 if today not logged
  // best streak across all
  let best=0;
  keys.forEach(k=>{ // count run ending at k
    let n=0,d=parseDate(k);
    while(has.has(todayStr(d))){n++;d.setDate(d.getDate()-1);}
    if(n>best)best=n;
  });
  const dayNum = Math.min(90, Math.max(1, daysBetween(data.startDate, todayStr())+1));

  return {total:keys.length,workouts,strengthDays,minutes,steps,maxSteps,proteinPerfect,proteinLogged,
          energy8,latestWeight,latestDate,lbsDown,curStreak,bestStreak:best,dayNum,keys};
}

/* ---------- render ---------- */
function fmt(n){return (n||0).toLocaleString();}

function renderToday(s){
  document.getElementById("dayNum").textContent=s.dayNum;
  document.getElementById("hStreak").textContent=s.curStreak;
  document.getElementById("hDown").textContent=(s.lbsDown>0?s.lbsDown.toFixed(1):"0");
  document.getElementById("hWorkouts").textContent=s.workouts;

  const chapter = s.dayNum<=30?1:s.dayNum<=60?2:3;
  const cName=["Foundation","Build","Momentum"][chapter-1];
  document.getElementById("chapterTag").textContent="Ch."+chapter+" · "+cName;

  const dow=new Date().getDay();
  const w=SPLIT[dow];
  document.getElementById("todayName").textContent=DAYNAMES[dow];
  document.getElementById("sessFocus").textContent="Today · "+DAYNAMES[dow];
  document.getElementById("sessTitle").textContent=w.focus+" · "+w.meta;
  document.getElementById("sessList").innerHTML=w.ex.map(e=>`<div class="ex"><span>${e[0]}</span><span class="n">${e[1]}</span></div>`).join("");
  document.getElementById("sessNote").textContent="💡 "+w.note;

  // pep
  const sp=streakPep(s.curStreak);
  document.getElementById("pep").innerHTML = sp || PEPS[s.dayNum % PEPS.length];
}

function renderCheckinForm(){
  const d=document.getElementById("ciDate").value || todayStr();
  const e=data.checkins[d];
  const setSeg=(id,val)=>{document.querySelectorAll("#"+id+" button").forEach(b=>b.classList.toggle("on",b.dataset.v==String(val)));};
  document.getElementById("ciWeight").value = e&&e.weight!=null?e.weight:"";
  document.getElementById("ciSteps").value  = e&&e.steps!=null?e.steps:"";
  document.getElementById("ciWType").value  = e&&e.wType?e.wType:"";
  document.getElementById("ciWMin").value   = e&&e.wMin!=null?e.wMin:"";
  document.getElementById("ciEnergy").value = e&&e.energy?e.energy:6;
  document.getElementById("enVal").textContent = e&&e.energy?e.energy:6;
  document.getElementById("ciWin").value    = e&&e.win?e.win:"";
  setSeg("ciProtein", e&&e.protein!=null?e.protein:"__");
  setSeg("ciDessert", e&&e.dessert?e.dessert:"__");
}

function renderProgress(s){
  document.getElementById("lStart").textContent=data.startWeight;
  document.getElementById("lNow").innerHTML = s.latestWeight!=null?("Now <b>"+s.latestWeight+"</b>"):"Now —";
  // runner position
  const goal=data.goalWeight;
  let pct=2;
  if(s.latestWeight!=null){
    if(goal && goal<data.startWeight){
      pct = Math.max(2,Math.min(98,((data.startWeight-s.latestWeight)/(data.startWeight-goal))*100));
      document.getElementById("lGoalLabel").innerHTML="Goal <b>"+goal+"</b>";
    }else{
      // no goal: show progress over a 30lb visual horizon
      pct = Math.max(2,Math.min(98,((data.startWeight-s.latestWeight)/30)*100));
      document.getElementById("lGoalLabel").innerHTML = goal?("Goal <b>"+goal+"</b>"):"Set a goal →";
    }
  }
  document.getElementById("runner").style.left=pct+"%";
  document.getElementById("goalInput").value = goal||"";

  document.getElementById("sStreakBest").textContent=s.bestStreak;
  document.getElementById("sMinutes").textContent=fmt(s.minutes);
  document.getElementById("sSteps").textContent=fmt(s.steps);
  const pc = s.proteinLogged? Math.round((s.proteinPerfect/s.proteinLogged)*100):0;
  document.getElementById("sProtein").textContent=pc+"%";

  renderChart();
  renderMilestones(s);
  renderBadges(s);
}

function renderChart(){
  const svg=document.getElementById("chart"), empty=document.getElementById("chartEmpty");
  const pts=data.checkins;
  const rows=Object.keys(pts).sort().filter(k=>pts[k].weight!=null && pts[k].weight!=="").map(k=>({d:k,w:Number(pts[k].weight)}));
  if(rows.length<2){ svg.style.display="none"; empty.style.display="block"; svg.innerHTML=""; return; }
  svg.style.display="block"; empty.style.display="none";
  const W=320,H=190,pad=26;
  const ws=rows.map(r=>r.w);
  let min=Math.min(...ws,data.startWeight), max=Math.max(...ws,data.startWeight);
  if(max-min<4){max+=2;min-=2;}
  const t0=parseDate(rows[0].d).getTime(), t1=parseDate(rows[rows.length-1].d).getTime();
  const x=(d)=> pad + ( (t1===t0)?0.5:( (parseDate(d).getTime()-t0)/(t1-t0) )) * (W-pad*1.4);
  const y=(w)=> pad + (1-(w-min)/(max-min))*(H-pad*2);
  // gridlines
  let g="";
  for(let i=0;i<=3;i++){const yy=pad+(i/3)*(H-pad*2);const val=(max-(i/3)*(max-min)).toFixed(0);
    g+=`<line x1="${pad}" y1="${yy}" x2="${W-6}" y2="${yy}" stroke="rgba(255,255,255,.08)"/><text x="4" y="${yy+4}" fill="#9db3ad" font-size="9" font-family="Anton">${val}</text>`;}
  const line=rows.map((r,i)=>(i?"L":"M")+x(r.d).toFixed(1)+" "+y(r.w).toFixed(1)).join(" ");
  const area=line+` L ${x(rows[rows.length-1].d).toFixed(1)} ${H-pad} L ${x(rows[0].d).toFixed(1)} ${H-pad} Z`;
  const dots=rows.map(r=>`<circle cx="${x(r.d).toFixed(1)}" cy="${y(r.w).toFixed(1)}" r="3.2" fill="#ff8b3d" stroke="#0e2a28" stroke-width="1.5"/>`).join("");
  svg.innerHTML=`
    <defs><linearGradient id="ag" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="rgba(255,139,61,.35)"/><stop offset="1" stop-color="rgba(255,139,61,0)"/></linearGradient></defs>
    ${g}
    <path d="${area}" fill="url(#ag)"/>
    <path d="${line}" fill="none" stroke="#ff8b3d" stroke-width="2.5" stroke-linejoin="round" stroke-linecap="round"/>
    ${dots}`;
}

function renderMilestones(s){
  const el=document.getElementById("mileList");
  const start=data.startWeight;
  const floor = data.goalWeight && data.goalWeight<start ? data.goalWeight : start-30;
  let html="";
  for(let w=start-5; w>=floor; w-=5){
    const hit = s.latestWeight!=null && s.latestWeight<=w;
    const lost=start-w;
    html+=`<div class="mile ${hit?'hit':''}"><div class="chk">${hit?'✓':''}</div>
      <div class="w">${w}</div><div class="lbl">${lost} lbs down${w===data.goalWeight?' · 🎯 goal':''}</div></div>`;
  }
  el.innerHTML=html || '<p class="muted" style="font-size:13px;margin:4px">Log a weigh-in to light up your milestone ladder.</p>';
}

function renderBadges(s){
  const grid=document.getElementById("badgeGrid");
  grid.innerHTML=BADGES.map(b=>{
    const earned=!!data.earnedBadges[b.id];
    return `<div class="bg ${earned?'earned':''}" title="${b.ds}">
      <div class="ico">${b.ic}</div><div class="nm">${b.nm}</div></div>`;
  }).join("");
}

function renderTrain(){
  const order=[1,2,3,4,5,6,0];
  const dow=new Date().getDay();
  document.getElementById("trainList").innerHTML=order.map(day=>{
    const w=SPLIT[day];const isToday=day===dow;
    return `<details class="acc ${isToday?'today':''}" ${isToday?'open':''}>
      <summary>
        <div><div class="dfocus">${DAYNAMES[day]}</div><div class="dmeta">${w.focus} · ${w.meta}</div></div>
        <div style="display:flex;gap:8px;align-items:center">${isToday?'<span class="tdy-pill">Today</span>':''}<span class="chev">▾</span></div>
      </summary>
      <div class="body">
        ${w.ex.map(e=>`<div class="ex"><span>${e[0]}</span><span class="n">${e[1]}</span></div>`).join("")}
        <p class="muted" style="font-size:12.5px;line-height:1.5;margin:10px 0 0">💡 ${w.note}</p>
      </div></details>`;
  }).join("");
}

/* ---------- master render ---------- */
function renderAll(){
  const s=computeStats();
  const now=new Date();
  document.getElementById("dateline").textContent =
    now.toLocaleDateString(undefined,{weekday:'long',month:'short',day:'numeric'}).toUpperCase() + " · DAY " + s.dayNum;
  renderToday(s);
  renderProgress(s);
  return s;
}

/* ---------- save flow + celebration ---------- */
function toast(msg){const t=document.getElementById("toast");t.textContent=msg;t.classList.add("show");
  setTimeout(()=>t.classList.remove("show"),2600);}

function checkNewBadges(s){
  const newly=[];
  BADGES.forEach(b=>{ if(!data.earnedBadges[b.id] && b.t(s)){ data.earnedBadges[b.id]=todayStr(); newly.push(b); } });
  return newly;
}
function celebrate(newBadges){
  const bg=document.getElementById("modalBg");
  document.getElementById("modalTitle").textContent = newBadges.length>1? newBadges.length+" New Trophies!" : "Trophy Unlocked!";
  document.getElementById("modalBadges").innerHTML=newBadges.map(b=>
    `<div class="newbadge"><div class="ico">${b.ic}</div><div><b>${b.nm}</b><small>${b.ds}</small></div></div>`).join("");
  // confetti
  const colors=["#ff8b3d","#f4c04a","#5fd39b","#f3efe4"];
  for(let i=0;i<26;i++){const c=document.createElement("div");c.className="confetti";
    c.style.left=Math.random()*100+"%";c.style.background=colors[i%colors.length];
    c.style.animationDuration=(1.6+Math.random()*1.4)+"s";c.style.animationDelay=(Math.random()*.4)+"s";
    document.getElementById("modal").appendChild(c);setTimeout(()=>c.remove(),3600);}
  bg.classList.add("show");
}

function saveCheckin(){
  const d=document.getElementById("ciDate").value || todayStr();
  const protBtn=document.querySelector("#ciProtein button.on");
  const dessBtn=document.querySelector("#ciDessert button.on");
  const entry={
    weight: document.getElementById("ciWeight").value!==""?Number(document.getElementById("ciWeight").value):null,
    steps:  document.getElementById("ciSteps").value!==""?Number(document.getElementById("ciSteps").value):null,
    wType:  document.getElementById("ciWType").value.trim(),
    wMin:   document.getElementById("ciWMin").value!==""?Number(document.getElementById("ciWMin").value):null,
    energy: Number(document.getElementById("ciEnergy").value),
    win:    document.getElementById("ciWin").value.trim(),
    protein: protBtn?Number(protBtn.dataset.v):null,
    dessert: dessBtn?dessBtn.dataset.v:null
  };
  data.checkins[d]=entry;
  const s=computeStats();
  const newBadges=checkNewBadges(s);
  save();
  const s2=renderAll();
  document.getElementById("savedNote").textContent = memoryFallback
    ? "Saved for now — enable storage/leave private mode to keep it"
    : "Logged for "+parseDate(d).toLocaleDateString(undefined,{month:'short',day:'numeric'})+" ✓";
  setTimeout(()=>document.getElementById("savedNote").textContent="",3500);
  if(newBadges.length){ celebrate(newBadges); }
  else { toast("Day logged 💪  Streak: "+s2.curStreak); }
}

/* ---------- events ---------- */
function bind(){
  // nav
  document.querySelectorAll("nav button").forEach(b=>b.addEventListener("click",()=>{
    const t=b.dataset.tab;
    document.querySelectorAll("nav button").forEach(x=>x.classList.toggle("on",x===b));
    document.querySelectorAll(".tab").forEach(x=>x.classList.remove("on"));
    document.getElementById("tab-"+t).classList.add("on");
    window.scrollTo({top:0,behavior:"smooth"});
    if(t==="progress"){ setTimeout(()=>{ const s=computeStats(); renderProgress(s); },30); }
  }));
  // protein / dessert segmented
  document.querySelectorAll("#ciProtein button").forEach(b=>b.addEventListener("click",()=>{
    document.querySelectorAll("#ciProtein button").forEach(x=>x.classList.remove("on"));b.classList.add("on");}));
  document.querySelectorAll("#ciDessert button").forEach(b=>b.addEventListener("click",()=>{
    document.querySelectorAll("#ciDessert button").forEach(x=>x.classList.remove("on"));b.classList.add("on");}));
  document.getElementById("ciEnergy").addEventListener("input",e=>document.getElementById("enVal").textContent=e.target.value);
  document.getElementById("ciDate").addEventListener("change",renderCheckinForm);
  document.getElementById("saveBtn").addEventListener("click",saveCheckin);
  document.getElementById("goalSave").addEventListener("click",()=>{
    const v=document.getElementById("goalInput").value;
    data.goalWeight = v!==""?Number(v):null; save(); renderProgress(computeStats());
    toast(data.goalWeight?("Goal set: "+data.goalWeight+" lb"):"Goal cleared");
  });
  document.getElementById("modalClose").addEventListener("click",()=>document.getElementById("modalBg").classList.remove("show"));
  document.getElementById("modalBg").addEventListener("click",e=>{if(e.target.id==="modalBg")document.getElementById("modalBg").classList.remove("show");});
}

/* ---------- boot ---------- */
(function(){
  load();
  document.getElementById("ciDate").value=todayStr();
  renderCheckinForm();
  renderTrain();
  bind();
  renderAll();
})();
</script>
</body>
</html>