// Home v5 — Apple aesthetic + permanent check-in canvas
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "mode": "light"
}/*EDITMODE-END*/;

function HomeV5App() {
  const [tw, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const t = AP_TOKENS.light;
  const canvasBg = '#e5e5ea';
  const canvasFg = '#1a1a1a';

  return (
    <div style={{
      position: 'fixed', inset: 0,
      background: canvasBg, color: canvasFg,
      fontFamily: AP_FONTS.sys,
    }}>
      <style>{`
        body { margin: 0; }
        ::-webkit-scrollbar { width: 0; height: 0; }
        .dc-canvas { background: ${canvasBg} !important; }
      `}</style>

      <DesignCanvas>
        <DCSection
          id="intro"
          title="Home · Apple aesthetic"
          subtitle="v5 keeps the Status Card + In-your-body direction, retuned for SF Pro + system-grey. Canonical layout: Status → Today → This week → In your body (collapsible)."
        >
          <DCArtboard id="brief" label="System" width={780} height={560}>
            <BriefV5 t={t}/>
          </DCArtboard>
          <DCArtboard id="states-index" label="All home states" width={760} height={780}>
            <StatesIndex t={t}/>
          </DCArtboard>
        </DCSection>

        <DCSection
          id="scenarios"
          title="Home states"
          subtitle="Empty · Active · Multi-dose · Rest day · Weekly cadence · All done · plus the logging flow (pick → confirm → just logged)."
        >
          <DCArtboard id="home-f" label="F · New user · empty" width={1000} height={900}>
            <ScenarioBoard t={t}
              phone={<APHome_F t={t}/>}
              title="F · Brand-new user"
              scenario="Just finished onboarding. No peptides set up. No history. No streaks."
              stack={['Welcome card (replaces Status)', "What you'll get (Apple grouped list)", 'Browse library teaser']}
              tone="No fake numbers, no skeleton 'in your body' card. The home commits to one job: 'add your first peptide'."
            />
          </DCArtboard>

          <DCArtboard id="home-a" label="A · Active day" width={1000} height={900}>
            <ScenarioBoard t={t}
              phone={<APHome_A t={t} weekFirst bodyCollapsible bodyCollapsed/>}
              title="A · Active day"
              scenario="BPC-157 · twice weekly. Friday morning. Dose due tonight."
              stack={['Status (active)', 'Today (1 dose, upcoming)', 'This week', 'In your body (collapsed)']}
              tone="Week performance sits above the levels chart. The In-your-body card is collapsed by default — tap to expand. Primary tap target stays the dose CTA."
            />
          </DCArtboard>

          <DCArtboard id="home-b" label="B · Multi-dose day" width={1000} height={900}>
            <ScenarioBoard t={t}
              phone={<APHome_B t={t} bodyCollapsible/>}
              title="B · Multi-dose day"
              scenario="BPC done this morning, TB-500 due midday, Reta tonight — three doses in one day."
              stack={['Status carousel (swipe upcoming)', 'Today (queue)', 'This week', 'In your body (3 curves, collapsible)']}
              tone="When a day has multiple doses, the status card becomes a swipeable carousel. Week performance sits above the collapsible 3-compound levels card."
            />
          </DCArtboard>

          <DCArtboard id="home-c" label="C · Rest day" width={1000} height={900}>
            <ScenarioBoard t={t}
              phone={<APHome_C t={t}/>}
              title="C · Rest day"
              scenario="BPC Mon/Thu. Today is Wednesday. Nothing to dose."
              stack={['Status (muted, no CTA)', 'Today (rest — no doses)', 'This week', 'In your body (collapsible)']}
              tone="Card flips to muted. Week performance sits above the collapsible levels chart; the Today card confirms there's nothing to dose."
            />
          </DCArtboard>

          <DCArtboard id="home-d" label="D · Weekly cadence" width={1000} height={900}>
            <ScenarioBoard t={t}
              phone={<APHome_D t={t}/>}
              title="D · Once-weekly only"
              scenario="Retatrutide · 1×/week. Monday — 4d 9h until Friday."
              stack={['Status (muted, big countdown)', 'Today (no doses today)', 'This week', 'In your body (collapsible)']}
              tone="Week performance sits above the levels chart. Expand In-your-body to see Reta still 74% active days before the next dose."
            />
          </DCArtboard>

          <DCArtboard id="home-e" label="E · All done" width={1000} height={900}>
            <ScenarioBoard t={t}
              phone={<APHome_E t={t}/>}
              title="E · Just logged"
              scenario="Logged dose 1h ago. Next dose Monday."
              stack={['Status (✓ done, muted)', 'Today (1 of 1 logged)', 'This week', 'In your body (collapsible)']}
              tone="Restraint reward. Week performance above the collapsible levels chart; the Today card shows the completed dose."
            />
          </DCArtboard>

          <DCArtboard id="home-logselect" label="Log · ad-hoc (from +)" width={1000} height={900}>
            <ScenarioBoard t={t}
              phone={<APHome_LogAdHoc t={t}/>}
              title="Log · ad-hoc"
              scenario="Tapped + to log a dose that isn't tied to today's schedule — a one-off, or backfilling a dose taken earlier."
              stack={['Dimmed home behind', 'Draw-to hero (once a compound is picked)', 'Compound · Date · Time · Site · Note', 'Log dose button']}
              tone="Replaces the old 'pick a scheduled dose' step. The user chooses a saved compound and a date, then the same time/site/note metadata as the confirm sheet. Full editing states in the Log · ad-hoc section below."
            />
          </DCArtboard>

          <DCArtboard id="home-logconfirm" label="Log · confirm" width={1000} height={900}>
            <ScenarioBoard t={t}
              phone={<APHome_LogSheet t={t}/>}
              title="Log · confirm"
              scenario="A dose is selected (or was the only one due). Confirm and log."
              stack={['Dimmed home behind', 'Draw-to units hero', 'Time · site · note rows', 'Log dose button']}
              tone="Restates the exact units to draw — the reassuring number at injection time. Two-tap default path."
            />
          </DCArtboard>

          <DCArtboard id="home-g" label="G · Just logged · single" width={1000} height={900}>
            <ScenarioBoard t={t}
              phone={<APHome_G t={t}/>}
              title="G · Just logged · single"
              scenario="The day's only dose just logged — now complete."
              stack={['Confirmation banner (Undo)', 'Status: ✓ done for today', 'Today 1 of 1', 'This week', 'In your body (peaked)']}
              tone="Banner is transient. Status flips to the all-done state counting to the next dose."
            />
          </DCArtboard>

          <DCArtboard id="home-h" label="H · Just logged · multi" width={1000} height={900}>
            <ScenarioBoard t={t}
              phone={<APHome_H t={t}/>}
              title="H · Just logged · multi"
              scenario="Logged one of several — more still to come today."
              stack={['Confirmation banner (Undo)', 'Carousel advances to next due', 'Today 2 of 3', 'This week', 'In your body (3 curves)']}
              tone="The just-logged dose drops off the carousel; the next due becomes the lead card."
            />
          </DCArtboard>
        </DCSection>

        <DCSection
          id="log-editing"
          title="Log sheet · editing time, site & note"
          subtitle="Tapping a row in the confirm sheet expands its editor inline — a time wheel, a site picker, or a note field with the keyboard."
        >
          <DCArtboard id="log-edit-time" label="Editing · Time" width={420} height={900}>
            <ArtboardWrap><APHome_LogSheet t={t} editing="time"/></ArtboardWrap>
          </DCArtboard>
          <DCArtboard id="log-edit-site" label="Editing · Site" width={420} height={900}>
            <ArtboardWrap><APHome_LogSheet t={t} editing="site"/></ArtboardWrap>
          </DCArtboard>
          <DCArtboard id="log-edit-note" label="Editing · Note" width={420} height={900}>
            <ArtboardWrap><APHome_LogSheet t={t} editing="note"/></ArtboardWrap>
          </DCArtboard>
          <DCArtboard id="log-edit-note2" label="Notes" width={300} height={900} style={{ background: 'transparent', boxShadow: 'none' }}>
            <LogEditNote t={t}/>
          </DCArtboard>
        </DCSection>

        <DCSection
          id="log-adhoc"
          title="Log · ad-hoc (from the + tab)"
          subtitle="Tapping + to log off-schedule. Same metadata as the scheduled sheet, plus the two things it can't assume: which saved compound, and what day. Compound picker → date calendar → time · site · note."
        >
          <DCArtboard id="adhoc-main" label="Ad-hoc · default" width={1000} height={900}>
            <ScenarioBoard t={t}
              phone={<APHome_LogAdHoc t={t}/>}
              title="Ad-hoc log · from +"
              scenario="Rest day, nothing due. User taps + to log a dose they took off-schedule (or forgot to log)."
              stack={['Dimmed home behind', 'Draw-to hero (once a compound is picked)', 'Compound · Date · Time · Site · Note', 'Log dose button']}
              tone="Unlike the scheduled sheet, the compound isn't known — the user picks from their saved list, and adds a calendar Date row. Everything else matches the confirm sheet."
            />
          </DCArtboard>
          <DCArtboard id="adhoc-compound" label="Picking · Compound" width={420} height={920}>
            <ArtboardWrap><APHome_LogAdHoc t={t} editing="compound"/></ArtboardWrap>
          </DCArtboard>
          <DCArtboard id="adhoc-date" label="Picking · Date" width={420} height={920}>
            <ArtboardWrap><APHome_LogAdHoc t={t} editing="date"/></ArtboardWrap>
          </DCArtboard>
          <DCArtboard id="adhoc-time" label="Picking · Time" width={420} height={920}>
            <ArtboardWrap><APHome_LogAdHoc t={t} editing="time"/></ArtboardWrap>
          </DCArtboard>
          <DCArtboard id="adhoc-site" label="Picking · Site" width={420} height={920}>
            <ArtboardWrap><APHome_LogAdHoc t={t} editing="site"/></ArtboardWrap>
          </DCArtboard>
          <DCArtboard id="adhoc-note" label="Picking · Note" width={420} height={920}>
            <ArtboardWrap><APHome_LogAdHoc t={t} editing="note"/></ArtboardWrap>
          </DCArtboard>
          <DCArtboard id="adhoc-note2" label="Notes" width={300} height={920} style={{ background: 'transparent', boxShadow: 'none' }}>
            <LogAdHocNote t={t}/>
          </DCArtboard>
        </DCSection>

        <DCSection
          id="multi-compound"
          title="In your body · multiple compounds"
          subtitle="When several compounds are active at once, each gets its own curve. Shown expanded (full curves) and collapsed (mini level bars)."
        >
          <DCArtboard id="multi-open" label="3 compounds · expanded" width={420} height={900}>
            <ArtboardWrap><APHome_B t={t} bodyCollapsible/></ArtboardWrap>
          </DCArtboard>
          <DCArtboard id="multi-collapsed" label="3 compounds · collapsed" width={420} height={900}>
            <ArtboardWrap><APHome_B t={t} bodyCollapsible bodyCollapsed/></ArtboardWrap>
          </DCArtboard>
          <DCArtboard id="multi-note" label="Notes" width={300} height={900} style={{ background: 'transparent', boxShadow: 'none' }}>
            <MultiNote t={t}/>
          </DCArtboard>
        </DCSection>

        <DCSection
          id="system"
          title="Apple system notes"
          subtitle="Tokens used"
        >
          <DCArtboard id="apple-tokens" label="Tokens" width={780} height={560}>
            <AppleTokens t={t}/>
          </DCArtboard>
        </DCSection>
      </DesignCanvas>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme">
          <TweakRadio
            label="Mode"
            value={tw.mode}
            options={[{ value: 'light', label: 'Light' }]}
            onChange={(v) => setTweak('mode', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

function ArtboardWrap({ children }) {
  return (
    <div style={{
      width: '100%', height: '100%',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: 12, boxSizing: 'border-box',
    }}>{children}</div>
  );
}

function StatesIndex({ t }) {
  const groups = [
    {
      head: 'Setup',
      rows: [
        { tag: 'F', name: 'New user · empty', desc: 'No peptides yet. Welcome card + "what you\u2019ll get" + browse library.' },
      ],
    },
    {
      head: 'Daily states',
      rows: [
        { tag: 'A', name: 'Active day · dose due', desc: 'Single compound, dose due today. Levels collapsed by default.' },
        { tag: 'B', name: 'Multi-dose day', desc: 'Several doses in one day → swipeable status carousel.' },
        { tag: 'C', name: 'Rest day', desc: 'Nothing scheduled. Muted status, "no doses" Today card.' },
        { tag: 'D', name: 'Weekly cadence', desc: 'Once-a-week compound. Big countdown, slow-decay levels.' },
        { tag: 'E', name: 'All done today', desc: 'Day complete. Muted "\u2713 done", counts to next dose.' },
      ],
    },
    {
      head: 'Logging flow',
      rows: [
        { tag: '▤', name: 'Log · ad-hoc', desc: 'From the + tab — pick a saved compound, a date, then time / site / note.' },
        { tag: '→', name: 'Log · confirm', desc: 'Scheduled dose: draw-to units, time, site. Skipped if only one due.' },
        { tag: 'G', name: 'Just logged · single', desc: 'Confirmation banner, then the all-done state.' },
        { tag: 'H', name: 'Just logged · multi', desc: 'Banner + carousel advances to the next due dose (2 of 3).' },
      ],
    },
  ];
  return (
    <div style={{
      width: '100%', height: '100%', padding: 32, boxSizing: 'border-box',
      background: t.surface, borderRadius: 20, color: t.text,
      display: 'flex', flexDirection: 'column', boxShadow: '0 1px 0 rgba(0,0,0,0.04)',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
        <div style={{ fontSize: 28, fontWeight: 700, letterSpacing: -0.8 }}>Home screen states</div>
        <div style={{ fontSize: 13, color: t.textMuted, fontWeight: 600 }}>10 screens</div>
      </div>
      <div style={{ fontSize: 13, color: t.textMuted, fontWeight: 500, marginTop: 4 }}>
        Every state shares one layout: <strong style={{ color: t.text }}>Status → Today → This week → In your body</strong>.
      </div>
      <div style={{ height: 0.5, background: t.separator, margin: '16px 0 4px' }}/>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0 36px', flex: 1 }}>
        {groups.map((g, gi) => (
          <div key={g.head} style={{ paddingTop: 14, ...(gi === groups.length - 1 ? { gridColumn: '1 / -1' } : {}) }}>
            <div style={{ fontSize: 11, fontWeight: 600, color: t.textMuted, letterSpacing: 0.3, textTransform: 'uppercase', marginBottom: 8 }}>{g.head}</div>
            {g.rows.map(r => (
              <div key={r.tag} style={{ display: 'flex', gap: 12, alignItems: 'flex-start', padding: '8px 0', borderBottom: '0.5px solid ' + t.separatorSoft }}>
                <span style={{
                  width: 24, height: 24, borderRadius: 7, background: t.text, color: t.inverseText,
                  display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
                  fontSize: 12, fontWeight: 700, fontFamily: AP_FONTS.num,
                }}>{r.tag}</span>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 14, fontWeight: 600, letterSpacing: -0.2 }}>{r.name}</div>
                  <div style={{ fontSize: 12, color: t.textMuted, fontWeight: 500, marginTop: 1, lineHeight: 1.4 }}>{r.desc}</div>
                </div>
              </div>
            ))}
          </div>
        ))}
      </div>
      <div style={{
        marginTop: 14, padding: 12, background: t.surfaceAlt, borderRadius: 10,
        fontSize: 12, color: t.textMuted, fontWeight: 500, lineHeight: 1.5,
      }}>
        Locked decisions: In-your-body is collapsible (collapsed default for single-compound) · multi-dose status becomes a swipe carousel · week strip sits above levels · logging is a bottom sheet → confirmation banner.
      </div>
    </div>
  );
}

function BriefV5({ t }) {
  return (
    <div style={{
      width: '100%', height: '100%', padding: 36, boxSizing: 'border-box',
      background: t.surface, borderRadius: 20, color: t.text,
      display: 'flex', flexDirection: 'column',
      boxShadow: '0 1px 0 rgba(0,0,0,0.04)',
    }}>
      <div style={{
        fontSize: 12, fontWeight: 600, color: t.textMuted,
        letterSpacing: -0.1, textTransform: 'uppercase',
      }}>v5 · Apple flavor</div>
      <div style={{
        fontSize: 42, fontWeight: 700, letterSpacing: -1.5, marginTop: 6, lineHeight: 1.02,
      }}>Clean. Elegant.<br/>Get out of the way.</div>
      <div style={{ height: 0.5, background: t.separator, margin: '20px 0' }}/>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px 40px', flex: 1 }}>
        <div>
          <div style={{
            fontSize: 12, fontWeight: 600, color: t.textMuted,
            letterSpacing: -0.1, textTransform: 'uppercase', marginBottom: 10,
          }}>What changed from v4</div>
          <ul style={{ margin: 0, padding: '0 0 0 18px', fontSize: 14, lineHeight: 1.7, color: t.text, fontWeight: 400 }}>
            <li>SF Pro family + tabular nums — no serif on Home</li>
            <li>System-grey (#f2f2f7) canvas, true-white cards</li>
            <li>0.5px Apple separators between rows</li>
            <li>Status card softer corners (20px), rounded numerals</li>
            <li>Tab bar with blur background</li>
            <li>Two cards carry most states: Status + In your body</li>
          </ul>
        </div>
        <div>
          <div style={{
            fontSize: 12, fontWeight: 600, color: t.textMuted,
            letterSpacing: -0.1, textTransform: 'uppercase', marginBottom: 10,
          }}>Card vocabulary</div>
          <ul style={{ margin: 0, padding: '0 0 0 18px', fontSize: 14, lineHeight: 1.7, color: t.text, fontWeight: 400 }}>
            <li><b>Status</b> — countdown / due-now / rest / done</li>
            <li><b>In your body</b> — live level curve per compound</li>
            <li><b>Today</b> — dose queue, only on multi-dose days</li>
            <li><b>Week strip</b> — only when it adds context</li>
            <li><b>Welcome</b> — replaces Status for brand-new users</li>
          </ul>
          <div style={{
            marginTop: 14, fontSize: 12.5, lineHeight: 1.5, color: t.textMuted, fontWeight: 500,
          }}>Daily check-in is parked for now — to be revisited once the dosing core feels right.</div>
        </div>
      </div>

      <div style={{
        marginTop: 22, padding: 14, background: t.surfaceAlt, borderRadius: 12,
        fontSize: 12.5, lineHeight: 1.5, color: t.textMuted, fontWeight: 500,
      }}>
        Most days collapse to <strong style={{ color: t.text }}>two cards</strong> — Status ("what now") and In your body ("what's in me"). Today's queue and the week strip appear only when they earn it. New users see a Welcome card instead of Status.
      </div>
    </div>
  );
}

function ScenarioBoard({ t, phone, title, scenario, stack, tone }) {
  return (
    <div style={{
      width: '100%', height: '100%', boxSizing: 'border-box',
      padding: 16, display: 'flex', alignItems: 'stretch', gap: 28,
    }}>
        {/* Phone — left */}
        <div style={{ flexShrink: 0, display: 'flex', alignItems: 'center' }}>
          {phone}
        </div>

        {/* Note — packed at the top, sections laid out horizontally */}
        <div style={{ flex: 1, paddingTop: 6, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
          <div style={{
            fontSize: 11, fontWeight: 600, color: t.textMuted,
            letterSpacing: -0.05, textTransform: 'uppercase',
          }}>Scenario</div>
          <div style={{ fontSize: 30, fontWeight: 700, letterSpacing: -0.8, marginTop: 4, lineHeight: 1.05 }}>{title}</div>
          <div style={{ height: 0.5, background: t.separator, margin: '18px 0 20px' }}/>

          {/* Horizontal columns */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 28 }}>
            <div>
              <div style={{
                fontSize: 11, fontWeight: 600, color: t.textMuted,
                letterSpacing: -0.05, textTransform: 'uppercase', marginBottom: 8,
              }}>Protocol</div>
              <div style={{ fontSize: 14, lineHeight: 1.5, color: t.text, fontWeight: 400 }}>{scenario}</div>
            </div>
            <div>
              <div style={{
                fontSize: 11, fontWeight: 600, color: t.textMuted,
                letterSpacing: -0.05, textTransform: 'uppercase', marginBottom: 8,
              }}>Card stack</div>
              <ol style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 6 }}>
                {stack.map((s, i) => (
                  <li key={i} style={{
                    display: 'flex', alignItems: 'baseline', gap: 8,
                    fontSize: 14, color: t.text, fontWeight: 500,
                  }}>
                    <span style={{
                      fontFamily: AP_FONTS.num, fontSize: 12, color: t.textMuted,
                      width: 18, flexShrink: 0,
                    }}>0{i + 1}</span>
                    <span>{s}</span>
                  </li>
                ))}
              </ol>
            </div>
            <div>
              <div style={{
                fontSize: 11, fontWeight: 600, color: t.textMuted,
                letterSpacing: -0.05, textTransform: 'uppercase', marginBottom: 8,
              }}>Notes</div>
              <div style={{ fontSize: 14, lineHeight: 1.5, color: t.textMuted, fontWeight: 500 }}>{tone}</div>
            </div>
          </div>
        </div>
    </div>
  );
}

function CheckInStates({ t }) {
  return (
    <div style={{
      width: '100%', height: '100%', padding: 32, boxSizing: 'border-box',
      background: t.surface, borderRadius: 20, color: t.text,
      display: 'flex', flexDirection: 'column',
      boxShadow: '0 1px 0 rgba(0,0,0,0.04)',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
        <div style={{ fontSize: 28, fontWeight: 700, letterSpacing: -0.8 }}>Three check-in states</div>
        <div style={{
          fontSize: 12, fontWeight: 600, color: t.textMuted,
          letterSpacing: -0.05, textTransform: 'uppercase',
        }}>Empty · Partial · Done</div>
      </div>
      <div style={{ height: 0.5, background: t.separator, margin: '14px 0 22px' }}/>
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18, flex: 1,
      }}>
        <div>
          <APCheckInCard t={t} state="empty"/>
          <div style={{
            marginTop: 12, fontSize: 12, color: t.textMuted, lineHeight: 1.5, fontWeight: 500,
          }}>Untouched. All scale segments greyed. CTA reads "Start →".</div>
        </div>
        <div>
          <APCheckInCard t={t} state="partial" energy={3} sleep={4} mood={null}/>
          <div style={{
            marginTop: 12, fontSize: 12, color: t.textMuted, lineHeight: 1.5, fontWeight: 500,
          }}>Mid-flight. The last filled segment is outlined (Apple "current value"). CTA reads "Save".</div>
        </div>
        <div>
          <APCheckInCard t={t} state="done" energy={4} sleep={4} mood={5}/>
          <div style={{
            marginTop: 12, fontSize: 12, color: t.textMuted, lineHeight: 1.5, fontWeight: 500,
          }}>Logged. Hairline-divided note row appears. Subtitle becomes "Logged · tap to edit".</div>
        </div>
      </div>
    </div>
  );
}

function MultiNote({ t }) {
  const Item = ({ label, body }) => (
    <div style={{ marginBottom: 18 }}>
      <div style={{ fontSize: 11, fontWeight: 600, color: t.textMuted, letterSpacing: -0.05, textTransform: 'uppercase', marginBottom: 6 }}>{label}</div>
      <div style={{ fontSize: 13, lineHeight: 1.5, color: t.text, fontWeight: 400 }}>{body}</div>
    </div>
  );
  return (
    <div style={{ padding: '6px 4px', display: 'flex', flexDirection: 'column' }}>
      <div style={{ fontSize: 11, fontWeight: 600, color: t.textMuted, letterSpacing: -0.05, textTransform: 'uppercase' }}>Exploration</div>
      <div style={{ fontSize: 26, fontWeight: 700, letterSpacing: -0.7, marginTop: 4, lineHeight: 1.08, marginBottom: 18 }}>Many compounds</div>
      <Item label="Expanded" body="Each compound gets its own row: name, half-life, current %, and a curve with the NOW marker. Stack rhythms read at a glance — BPC-157 (short half-life) climbs and falls fast, TB-500 stays high and flat, Retatrutide sits near zero just before tonight's dose."/>
      <Item label="Collapsed" body="Folds to one header plus a compact strip — a mini level bar + % for every compound. You still see relative load across all three without the card eating half the screen."/>
      <Item label="Why it scales" body="The curve-per-row layout is the same whether you run 1 compound or 5. Collapsing matters more the more compounds you add — that's why a 3-compound user is the one most likely to keep it closed day-to-day."/>
      <div style={{ marginTop: 'auto', paddingTop: 14, borderTop: '0.5px solid ' + t.separator, fontSize: 12, color: t.textMuted, fontWeight: 500, lineHeight: 1.5 }}>
        Open question: cap the expanded card at ~4 rows and make the rest scroll within the card, or just let it grow? For now it grows.
      </div>
    </div>
  );
}

function LogEditNote({ t }) {
  const Item = ({ label, body }) => (
    <div style={{ marginBottom: 18 }}>
      <div style={{ fontSize: 11, fontWeight: 600, color: t.textMuted, letterSpacing: -0.05, textTransform: 'uppercase', marginBottom: 6 }}>{label}</div>
      <div style={{ fontSize: 13, lineHeight: 1.5, color: t.text, fontWeight: 400 }}>{body}</div>
    </div>
  );
  return (
    <div style={{ padding: '6px 4px', display: 'flex', flexDirection: 'column' }}>
      <div style={{ fontSize: 11, fontWeight: 600, color: t.textMuted, letterSpacing: -0.05, textTransform: 'uppercase' }}>Interaction</div>
      <div style={{ fontSize: 26, fontWeight: 700, letterSpacing: -0.7, marginTop: 4, lineHeight: 1.08, marginBottom: 18 }}>Editing in the sheet</div>
      <Item label="Time" body="The Time row expands to an iOS time wheel (hour · minute · AM/PM). Spin to any minute — no stepping. Header switches to 'Set time' with a Done."/>
      <Item label="Site" body="The Site row opens a picker of all injection sites. The next-in-rotation site is pre-selected (NEXT tag); the last-used site is marked (LAST) so you rotate away from it."/>
      <Item label="Note" body="The Note row reveals a text field and raises the keyboard. The dose hero hides to make room. Free text for how the shot felt, redness, etc."/>
      <div style={{ marginTop: 'auto', paddingTop: 14, borderTop: '0.5px solid ' + t.separator, fontSize: 12, color: t.textMuted, fontWeight: 500, lineHeight: 1.5 }}>
        All three expand inline (accordion) — the user never leaves the log sheet, and Done collapses back to the confirm view.
      </div>
    </div>
  );
}

function LogAdHocNote({ t }) {
  const Item = ({ label, body }) => (
    <div style={{ marginBottom: 18 }}>
      <div style={{ fontSize: 11, fontWeight: 600, color: t.textMuted, letterSpacing: -0.05, textTransform: 'uppercase', marginBottom: 6 }}>{label}</div>
      <div style={{ fontSize: 13, lineHeight: 1.5, color: t.text, fontWeight: 400 }}>{body}</div>
    </div>
  );
  return (
    <div style={{ padding: '6px 4px', display: 'flex', flexDirection: 'column' }}>
      <div style={{ fontSize: 11, fontWeight: 600, color: t.textMuted, letterSpacing: -0.05, textTransform: 'uppercase' }}>Flow</div>
      <div style={{ fontSize: 26, fontWeight: 700, letterSpacing: -0.7, marginTop: 4, lineHeight: 1.08, marginBottom: 18 }}>Logging off-schedule</div>
      <Item label="Why a separate sheet" body="The scheduled sheet already knows the compound, dose and day — it just confirms. The + tab makes none of those assumptions, so it adds the two missing decisions: which compound, and when."/>
      <Item label="Compound" body="The Compound row opens the user's saved list — the compounds they built in their library, each with its saved dose and concentration. Picking one recomputes the draw-to hero."/>
      <Item label="Date" body="A calendar month replaces the scheduled sheet's fixed day. Today and Yesterday are one-tap chips for the common case; future days are dimmed. This is what makes backfilling a forgotten dose possible."/>
      <Item label="Everything else is shared" body="Time wheel, site picker (with NEXT/LAST rotation hints) and the note field are the exact same components as the scheduled confirm sheet — so the two flows feel identical once the compound and date are set."/>
      <div style={{ marginTop: 'auto', paddingTop: 14, borderTop: '0.5px solid ' + t.separator, fontSize: 12, color: t.textMuted, fontWeight: 500, lineHeight: 1.5 }}>
        Log dose stays muted until a compound is chosen — the one hard requirement. On confirm it dismisses to the same "just logged" banner as the scheduled path.
      </div>
    </div>
  );
}

function LogSheetNote({ t }) {
  const Item = ({ label, body }) => (
    <div style={{ marginBottom: 18 }}>
      <div style={{ fontSize: 11, fontWeight: 600, color: t.textMuted, letterSpacing: -0.05, textTransform: 'uppercase', marginBottom: 6 }}>{label}</div>
      <div style={{ fontSize: 13, lineHeight: 1.5, color: t.text, fontWeight: 400 }}>{body}</div>
    </div>
  );
  return (
    <div style={{ padding: '6px 4px', display: 'flex', flexDirection: 'column' }}>
      <div style={{ fontSize: 11, fontWeight: 600, color: t.textMuted, letterSpacing: -0.05, textTransform: 'uppercase' }}>Interaction</div>
      <div style={{ fontSize: 26, fontWeight: 700, letterSpacing: -0.7, marginTop: 4, lineHeight: 1.08, marginBottom: 18 }}>The log sheet</div>
      <Item label="Why a sheet" body="Tapping Log dose doesn't navigate away — a bottom sheet slides up over the dimmed home, so the user keeps context and can swipe down to cancel. Standard iOS modal pattern."/>
      <Item label="Draw-to hero" body="The black card restates what to physically draw — '10 units, U-100' — the single most reassuring number at injection time. Computed from the dose + concentration; the user never does the math."/>
      <Item label="Editable in place" body="Time defaults to Now, Site to the next in rotation — both one tap to change. A note is optional. Nothing is required: the default path is two taps (open → Log dose)."/>
      <div style={{ marginTop: 'auto', paddingTop: 14, borderTop: '0.5px solid ' + t.separator, fontSize: 12, color: t.textMuted, fontWeight: 500, lineHeight: 1.5 }}>
        On confirm → the sheet dismisses and the home shows the “just logged” banner + updated state (see next section).
      </div>
    </div>
  );
}

function LoggedNote({ t }) {
  const Item = ({ label, body }) => (
    <div style={{ marginBottom: 18 }}>
      <div style={{ fontSize: 11, fontWeight: 600, color: t.textMuted, letterSpacing: -0.05, textTransform: 'uppercase', marginBottom: 6 }}>{label}</div>
      <div style={{ fontSize: 13, lineHeight: 1.5, color: t.text, fontWeight: 400 }}>{body}</div>
    </div>
  );
  return (
    <div style={{ padding: '6px 4px', display: 'flex', flexDirection: 'column' }}>
      <div style={{ fontSize: 11, fontWeight: 600, color: t.textMuted, letterSpacing: -0.05, textTransform: 'uppercase' }}>State</div>
      <div style={{ fontSize: 26, fontWeight: 700, letterSpacing: -0.7, marginTop: 4, lineHeight: 1.08, marginBottom: 18 }}>Just logged</div>
      <Item label="Confirmation banner" body="A black toast confirms the log — compound, dose, units, site, 'just now' — with an Undo affordance. It's the immediate feedback the tap registered, and it sits at the very top above everything."/>
      <Item label="Single dose · all done" body="With the day's only dose logged, the status card flips to the muted '✓ Done for today' state and counts down to the next scheduled dose. Today reads 1 of 1, the week strip marks today done, and levels (collapsed) just peaked at 92%."/>
      <Item label="Multi dose · more to go" body="Logging one of several advances the carousel: the just-logged dose drops off the front, the next due (Retatrutide) becomes the lead card, and the eyebrow updates to '2 of 3 done'. The Today row shows the fresh check with 'just now'."/>
      <div style={{ marginTop: 'auto', paddingTop: 14, borderTop: '0.5px solid ' + t.separator, fontSize: 12, color: t.textMuted, fontWeight: 500, lineHeight: 1.5 }}>
        The banner is transient — it would auto-dismiss after a few seconds (or on Undo). Everything beneath it is the steady-state home.
      </div>
    </div>
  );
}

function AppleTokens({ t }) {
  const swatches = [
    { name: 'systemGray6 · canvas', hex: '#e5e5ea' },    { name: 'systemGroupedBg · screen', hex: '#f2f2f7' },
    { name: 'systemBackground · cards', hex: '#ffffff' },
    { name: 'separator', hex: 'rgba(60,60,67,0.18)' },
    { name: 'label', hex: '#000000' },
    { name: 'secondaryLabel', hex: 'rgba(60,60,67,0.60)' },
    { name: 'tertiaryLabel', hex: 'rgba(60,60,67,0.30)' },
    { name: 'systemFill', hex: 'rgba(120,120,128,0.12)' },
  ];
  return (
    <div style={{
      width: '100%', height: '100%', padding: 32, boxSizing: 'border-box',
      background: t.surface, borderRadius: 20, color: t.text,
      display: 'flex', flexDirection: 'column',
      boxShadow: '0 1px 0 rgba(0,0,0,0.04)',
    }}>
      <div style={{ fontSize: 28, fontWeight: 700, letterSpacing: -0.8 }}>Apple tokens</div>
      <div style={{ height: 0.5, background: t.separator, margin: '14px 0 18px' }}/>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32, flex: 1 }}>
        <div>
          <div style={{
            fontSize: 12, fontWeight: 600, color: t.textMuted,
            letterSpacing: -0.05, textTransform: 'uppercase', marginBottom: 12,
          }}>Color</div>
          {swatches.map(s => (
            <div key={s.name} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '8px 0', borderBottom: '0.5px solid ' + t.separatorSoft }}>
              <span style={{
                width: 32, height: 32, borderRadius: 8, background: s.hex,
                border: '1px solid ' + t.separator, flexShrink: 0,
              }}/>
              <div style={{ flex: 1, fontSize: 13, fontWeight: 500 }}>{s.name}</div>
              <div style={{
                fontFamily: AP_FONTS.mono, fontSize: 11, color: t.textMuted,
              }}>{s.hex}</div>
            </div>
          ))}
        </div>
        <div>
          <div style={{
            fontSize: 12, fontWeight: 600, color: t.textMuted,
            letterSpacing: -0.05, textTransform: 'uppercase', marginBottom: 12,
          }}>Type</div>
          <div style={{ padding: '6px 0' }}>
            <div style={{ fontSize: 34, fontWeight: 700, letterSpacing: -0.8, fontFamily: AP_FONTS.sys }}>Good morning</div>
            <div style={{ fontSize: 11, color: t.textMuted, marginTop: 2 }}>SF Pro Display · 34 / 700 / -0.8</div>
          </div>
          <div style={{ padding: '14px 0', borderTop: '0.5px solid ' + t.separatorSoft }}>
            <div style={{ fontSize: 72, fontWeight: 700, letterSpacing: -2.5, fontFamily: AP_FONTS.num, fontVariantNumeric: 'tabular-nums' }}>10:24</div>
            <div style={{ fontSize: 11, color: t.textMuted, marginTop: 2 }}>SF Pro Rounded · 72 / 700 / tabular-nums</div>
          </div>
          <div style={{ padding: '12px 0', borderTop: '0.5px solid ' + t.separatorSoft }}>
            <div style={{ fontSize: 17, fontWeight: 600, letterSpacing: -0.4 }}>Card title</div>
            <div style={{ fontSize: 11, color: t.textMuted, marginTop: 2 }}>SF Pro Display · 17 / 600 / -0.4 — Apple section header</div>
          </div>
          <div style={{ padding: '12px 0', borderTop: '0.5px solid ' + t.separatorSoft }}>
            <div style={{ fontSize: 12, fontWeight: 600, color: t.textMuted, letterSpacing: -0.05, textTransform: 'uppercase' }}>EYEBROW · LABEL</div>
            <div style={{ fontSize: 11, color: t.textMuted, marginTop: 2 }}>SF Pro · 12 / 600 / uppercase / secondaryLabel</div>
          </div>
        </div>
      </div>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<HomeV5App/>);