// Routine — segmented hub with 4 sub-pages: Today / Diet / Workout / Guidelines
function NCRoutine({ brand, accent, theme, initialTab, onOpenRecipe }) {
  const T = NCTokens({ themeKey: theme, brandColor: brand, accentColor: accent });
  const [tab, setTab] = React.useState(initialTab || 'today');

  return (
    <div style={{ paddingBottom: 110, background: T.bg, minHeight: '100%', fontFamily: T.font, color: T.ink }}>
      {/* Header */}
      <div style={{ padding: '60px 20px 0', display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
        <div style={{ fontSize: 28, fontWeight: 700, letterSpacing: -0.6 }}>Routine</div>
        <div style={{ fontSize: 12, color: T.ink3, fontWeight: 500 }}>Week 6 · Mon</div>
      </div>

      {/* Segmented control */}
      <div style={{ padding: '14px 16px 0' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 4,
          background: T.card, borderRadius: 14, padding: 4,
          boxShadow: '0 1px 2px rgba(14,26,36,0.05)',
        }}>
          {['today','diet','workout','guidelines'].map(id => (
            <button key={id} onClick={() => setTab(id)} style={{
              border: 0, cursor: 'pointer', padding: '8px 4px', borderRadius: 10,
              background: tab === id ? ncMix(brand, 0.88) : 'transparent',
              color: tab === id ? ncDarken(brand, 0.4) : T.ink2,
              fontSize: 12, fontWeight: tab === id ? 700 : 500, letterSpacing: -0.1,
              fontFamily: T.font, textTransform: 'capitalize',
            }}>{id}</button>
          ))}
        </div>
      </div>

      {tab === 'today' && <NCRoutineToday T={T} brand={brand} onOpenRecipe={onOpenRecipe} />}
      {tab === 'diet' && <NCRoutineDiet T={T} brand={brand} onOpenRecipe={onOpenRecipe} />}
      {tab === 'workout' && <NCRoutineWorkout T={T} brand={brand} />}
      {tab === 'guidelines' && <NCRoutineGuidelines T={T} brand={brand} />}
    </div>
  );
}

// ── TODAY: hourly timeline (the original combined view) ───────────────
function NCRoutineToday({ T, brand, onOpenRecipe }) {
  const [done, setDone] = React.useState({
    'water-1': true, 'breakfast': true, 'snack1': true, 'walk': true, 'supp-1': true,
  });
  const toggle = (id) => setDone(d => ({ ...d, [id]: !d[id] }));

  const sw = T.swatches;
  const items = [
    { id: 'water-1', t: '06:30', kind: 'water', title: 'Wake-up water', sub: '2 glasses · room temp + lemon' },
    { id: 'supp-1', t: '07:00', kind: 'supplement', title: 'Vitamin D + Omega-3', sub: 'With first meal' },
    { id: 'breakfast', t: '08:00', kind: 'meal', tag: 'BREAKFAST', title: 'Greek yogurt parfait', sub: 'Berries, oats, honey, walnuts', kcal: 320, p: 22, tint: sw[1] },
    { id: 'guide-1', t: '09:30', kind: 'guideline', title: 'Sip water steadily', sub: 'Aim for 2 more glasses before lunch' },
    { id: 'snack1', t: '10:30', kind: 'meal', tag: 'SNACK', title: 'Apple & almonds', sub: '1 medium apple, 12 almonds', kcal: 180, p: 6, tint: sw[2] },
    { id: 'lunch', t: '12:30', kind: 'meal', tag: 'LUNCH', title: 'Mediterranean grain bowl', sub: 'Quinoa, chickpeas, cucumber, feta', kcal: 480, p: 22, tint: sw[0] },
    { id: 'walk', t: '13:30', kind: 'workout', title: 'Brisk walk', sub: 'After lunch · helps glucose response', dur: '20 min' },
    { id: 'snack2', t: '16:00', kind: 'meal', tag: 'SNACK', title: 'Protein smoothie', sub: 'Whey, banana, spinach, oat milk', kcal: 240, p: 28, tint: sw[3] },
    { id: 'workout-1', t: '17:30', kind: 'workout', title: 'Strength training', sub: 'Lower body · per coach plan', dur: '40 min' },
    { id: 'dinner', t: '19:30', kind: 'meal', tag: 'DINNER', title: 'Baked salmon, herbed rice', sub: 'Broccoli, lemon, olive oil', kcal: 540, p: 38, tint: sw[4] },
    { id: 'guide-2', t: '21:00', kind: 'guideline', title: 'Wind down', sub: 'No screens for 30 min before bed' },
    { id: 'sleep', t: '22:30', kind: 'sleep', title: 'Bedtime', sub: 'Aim for 7.5 h tonight' },
  ];

  const meals = items.filter(i => i.kind === 'meal');
  const tot = meals.reduce((a, m) => a + m.kcal, 0);
  const eaten = meals.filter(m => done[m.id]).reduce((a, m) => a + m.kcal, 0);
  const totalDone = items.filter(i => done[i.id]).length;

  return (
    <>
      {/* Day summary */}
      <div style={{
        margin: '14px 16px 0', padding: 16, borderRadius: 22, background: T.card,
        boxShadow: '0 1px 2px rgba(14,26,36,0.05)',
        display: 'flex', alignItems: 'center', gap: 16,
      }}>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 22, fontWeight: 700, color: T.ink, letterSpacing: -0.4 }}>
            {totalDone} <span style={{ fontSize: 13, fontWeight: 500, color: T.ink3 }}>of {items.length} done</span>
          </div>
          <div style={{ fontSize: 12, color: T.ink3, marginTop: 4 }}>
            {eaten} / {tot} kcal · {meals.filter(m => done[m.id]).length} of {meals.length} meals · 1 workout left
          </div>
        </div>
        <div style={{ position: 'relative', width: 60, height: 60 }}>
          <svg width="60" height="60" viewBox="0 0 60 60" style={{ transform: 'rotate(-90deg)' }}>
            <circle cx="30" cy="30" r="24" stroke={T.hair} strokeWidth="6" fill="none"/>
            <circle cx="30" cy="30" r="24" stroke={brand} strokeWidth="6" fill="none"
              strokeLinecap="round" strokeDasharray={`${2*Math.PI*24*(totalDone/items.length)} ${2*Math.PI*24}`}/>
          </svg>
          <div style={{
            position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 12, fontWeight: 700, color: T.ink,
          }}>{Math.round(totalDone/items.length*100)}%</div>
        </div>
      </div>

      {/* Timeline */}
      <div style={{ padding: '20px 16px 0', position: 'relative' }}>
        <div style={{
          position: 'absolute', left: 16 + 36, top: 28, bottom: 0, width: 2,
          background: T.hair, zIndex: 0,
        }} />
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12, position: 'relative' }}>
          {items.map((it) => (
            <NCTimelineItem key={it.id} T={T} brand={brand} item={it}
              done={!!done[it.id]} onToggle={() => toggle(it.id)}
              onOpen={it.kind === 'meal' ? () => onOpenRecipe && onOpenRecipe(it) : null} />
          ))}
        </div>
      </div>
    </>
  );
}

// ── DIET: 4-meal plan with macros, swaps, prep notes ──────────────────
function dietMealsData() {
  return [
    { id: 'breakfast', tag: 'BREAKFAST', t: '08:00', title: 'Greek yogurt parfait',
      kcal: 320, p: 22, c: 38, f: 9, prep: '5 min',
      items: [
        { n: 'Greek yogurt, plain', q: '200 g' },
        { n: 'Mixed berries', q: '½ cup', alts: ['Banana, sliced', 'Diced apple'] },
        { n: 'Overnight oats base', q: '3 tbsp', note: 'Soak overnight for softer texture',
          recipe: { title: 'Overnight oats base', tag: 'COMPONENT', kcal: 140, p: 5, prep: '5 min + soak', cuisine: 'Pantry' } },
        { n: 'Honey', q: '1 tsp' },
        { n: 'Walnuts, chopped', q: '6–8 pcs' },
      ] },
    { id: 'snack1', tag: 'MID-MORNING SNACK', t: '10:30', title: 'Apple & almonds',
      kcal: 180, p: 6, c: 25, f: 8, prep: '1 min',
      items: [
        { n: 'Apple, medium', q: '1 pc', alts: ['Pear, medium', 'Guava'] },
        { n: 'Raw almonds', q: '12 pcs', note: 'Soaked overnight, peel preferred' },
      ] },
    { id: 'lunch', tag: 'LUNCH', t: '12:30', title: 'Mediterranean grain bowl',
      kcal: 480, p: 22, c: 56, f: 18, prep: '15 min',
      items: [
        { n: 'Cooked quinoa', q: '1 cup', alts: ['Brown rice, 1 cup', 'Bulgur, 1 cup'],
          recipe: { title: 'Fluffy quinoa', tag: 'COMPONENT', kcal: 220, p: 8, prep: '15 min', cuisine: 'Pantry' } },
        { n: 'Chickpeas, boiled', q: '½ cup', note: 'Rinse well if using canned' },
        { n: 'Cucumber, diced', q: '½ cup' },
        { n: 'Cherry tomatoes', q: '6 pcs' },
        { n: 'Feta cheese, crumbled', q: '30 g', alts: ['Paneer, 30 g'] },
        { n: 'Lemon-herb dressing', q: '1 tbsp',
          recipe: { title: 'Lemon-herb dressing', tag: 'COMPONENT', kcal: 90, p: 0, prep: '3 min', cuisine: 'Mediterranean' } },
      ] },
    { id: 'snack2', tag: 'AFTERNOON SNACK', t: '16:00', title: 'Protein smoothie',
      kcal: 240, p: 28, c: 22, f: 6, prep: '3 min',
      items: [
        { n: 'Whey protein, vanilla', q: '1 scoop', alts: ['Plant protein, 1 scoop'] },
        { n: 'Banana, frozen', q: '½ pc' },
        { n: 'Baby spinach', q: '1 cup', note: 'Optional — boosts fiber + iron' },
        { n: 'Oat milk, unsweetened', q: '250 ml', alts: ['Almond milk, 250 ml'] },
        { n: 'Chia seeds', q: '1 tsp' },
      ] },
    { id: 'dinner', tag: 'DINNER', t: '19:30', title: 'Baked salmon, herbed rice',
      kcal: 540, p: 38, c: 48, f: 22, prep: '25 min',
      items: [
        { n: 'Baked salmon, lemon-dill', q: '150 g', note: 'Pat dry, season 10 min before baking', alts: ['Trout, 150 g', 'Tofu, firm, 180 g'],
          recipe: { title: 'Baked salmon, lemon-dill', tag: 'COMPONENT', kcal: 320, p: 34, prep: '20 min', cuisine: 'Mediterranean' } },
        { n: 'Herbed basmati rice', q: '¾ cup', alts: ['Cauliflower rice, 1 cup'],
          recipe: { title: 'Herbed basmati rice', tag: 'COMPONENT', kcal: 180, p: 4, prep: '15 min', cuisine: 'Pantry' } },
        { n: 'Broccoli florets, steamed', q: '1 cup' },
        { n: 'Lemon wedge', q: '1 pc' },
        { n: 'Olive oil', q: '1 tsp' },
        { n: 'Fresh dill / parsley', q: 'pinch' },
      ] },
  ];
}

function NCRoutineDiet({ T, brand, onOpenRecipe }) {
  const meals = dietMealsData();

  const totals = meals.reduce((a, m) => ({
    kcal: a.kcal + m.kcal, p: a.p + m.p, c: a.c + m.c, f: a.f + m.f,
  }), { kcal: 0, p: 0, c: 0, f: 0 });

  return (
    <>
      {/* Macro target ring */}
      <div style={{
        margin: '14px 16px 0', padding: 16, borderRadius: 22, background: T.card,
        boxShadow: '0 1px 2px rgba(14,26,36,0.05)',
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 12 }}>
          <div>
            <div style={{ fontSize: 11, color: T.ink3, fontWeight: 600, letterSpacing: 0.4 }}>DAILY TARGET</div>
            <div style={{ fontSize: 24, fontWeight: 700, letterSpacing: -0.5, marginTop: 2 }}>
              {totals.kcal} <span style={{ fontSize: 12, color: T.ink3, fontWeight: 500 }}>/ 1,800 kcal</span>
            </div>
          </div>
          <div style={{ fontSize: 11, color: T.good, fontWeight: 600, padding: '4px 8px',
            borderRadius: 8, background: ncMix(T.good, 0.85) }}>On plan</div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10 }}>
          <NCMacroBar label="Protein" value={totals.p} target={120} unit="g" color={brand} T={T} />
          <NCMacroBar label="Carbs" value={totals.c} target={210} unit="g" color={T.sem.water} T={T} />
          <NCMacroBar label="Fat" value={totals.f} target={65} unit="g" color={T.sem.workout} T={T} />
        </div>
      </div>

      {/* Meals list */}
      <div style={{ padding: '20px 16px 0', display: 'flex', flexDirection: 'column', gap: 12 }}>
        {meals.map(m => (
          <NCMealCard key={m.id} m={m} T={T} brand={brand}
            onOpen={() => onOpenRecipe && onOpenRecipe(m)}
            onOpenItem={(it) => onOpenRecipe && onOpenRecipe({ ...it.recipe, tint: m.tint || (T.swatches && T.swatches[0]) })} />
        ))}
      </div>

      {/* Suggestion */}
      <div style={{
        margin: '20px 16px 0', padding: 16, borderRadius: 22,
        background: ncMix(brand, 0.88), display: 'flex', alignItems: 'center', gap: 12,
      }}>
        <div style={{
          width: 36, height: 36, borderRadius: 10, background: '#fff',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>{ncIcon.sparkle(brand)}</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 13, fontWeight: 600, color: ncDarken(brand, 0.5) }}>Need a swap?</div>
          <div style={{ fontSize: 12, color: ncDarken(brand, 0.6), marginTop: 1, lineHeight: 1.4 }}>
            Browse approved recipes that match your macros.
          </div>
        </div>
        {ncIcon.chev(ncDarken(brand, 0.4))}
      </div>
    </>
  );
}

// Meal card — header (tag/time/title/macros) + ingredient list with notes & alternatives
function NCMealCard({ m, T, brand, onOpen, onOpenItem }) {
  const [open, setOpen] = React.useState(false);
  const visible = open ? m.items : m.items.slice(0, 3);
  const more = m.items.length - visible.length;

  return (
    <div style={{
      background: T.card, borderRadius: 18, fontFamily: T.font,
      boxShadow: '0 1px 2px rgba(14,26,36,0.05)', overflow: 'hidden',
    }}>
      {/* Header — tappable, opens recipe */}
      <button onClick={onOpen} style={{
        border: 0, background: 'transparent', cursor: 'pointer', textAlign: 'left',
        width: '100%', padding: '12px 14px 10px', fontFamily: T.font,
        display: 'flex', flexDirection: 'column', gap: 4,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          <span style={{ fontSize: 9, fontWeight: 700, color: brand, letterSpacing: 0.5 }}>{m.tag}</span>
          <span style={{ fontSize: 10, color: T.ink3 }}>· {m.t}</span>
          <span style={{ fontSize: 10, color: T.ink3, marginLeft: 'auto' }}>{m.prep} prep</span>
        </div>
        <div style={{ fontSize: 15, fontWeight: 600, color: T.ink, letterSpacing: -0.2 }}>{m.title}</div>
        <div style={{ display: 'flex', gap: 10, marginTop: 2 }}>
          <span style={{ fontSize: 10, color: T.ink2, fontWeight: 600 }}>{m.kcal} kcal</span>
          <span style={{ fontSize: 10, color: T.ink3 }}>P {m.p} · C {m.c} · F {m.f}</span>
          <span style={{ fontSize: 10, color: T.ink3, marginLeft: 'auto' }}>{m.items.length} items</span>
        </div>
      </button>

      {/* Item list */}
      <div style={{ borderTop: `0.5px solid ${T.hair}` }}>
        {visible.map((it, i) => (
          <NCMealItem key={i} it={it} T={T} brand={brand}
            onOpenItem={onOpenItem}
            last={i === visible.length - 1 && more <= 0} />
        ))}
        {more > 0 && (
          <button onClick={() => setOpen(true)} style={{
            width: '100%', border: 0, background: 'transparent', cursor: 'pointer',
            padding: '10px 14px', fontFamily: T.font, fontSize: 11, fontWeight: 600,
            color: brand, letterSpacing: 0.2, textAlign: 'left',
            borderTop: `0.5px solid ${T.hair}`,
          }}>Show {more} more {more === 1 ? 'item' : 'items'} ↓</button>
        )}
      </div>
    </div>
  );
}

function NCMealItem({ it, T, brand, last, onOpenItem }) {
  const hasNote = !!it.note;
  const hasAlts = it.alts && it.alts.length > 0;
  const hasRecipe = !!it.recipe;
  const handle = (e) => { e.stopPropagation(); if (hasRecipe && onOpenItem) onOpenItem(it); };
  return (
    <div style={{
      padding: '10px 14px',
      borderBottom: last ? 'none' : `0.5px solid ${T.hair}`,
    }}>
      <div
        onClick={hasRecipe ? handle : undefined}
        style={{
          display: 'flex', alignItems: 'baseline', gap: 8,
          cursor: hasRecipe ? 'pointer' : 'default',
        }}>
        <div style={{
          width: 5, height: 5, borderRadius: 3, background: brand,
          flexShrink: 0, transform: 'translateY(-2px)',
        }} />
        <div style={{ flex: 1, minWidth: 0, fontSize: 13, color: T.ink, lineHeight: 1.35,
          letterSpacing: -0.1, display: 'flex', alignItems: 'center', gap: 6 }}>
          <span style={{
            textDecoration: hasRecipe ? 'underline' : 'none',
            textDecorationColor: hasRecipe ? ncMix(brand, 0.5) : 'transparent',
            textUnderlineOffset: 3,
          }}>{it.n}</span>
          {hasRecipe && (
            <span style={{
              fontSize: 9, fontWeight: 700, color: brand, letterSpacing: 0.4,
              padding: '2px 6px', borderRadius: 999,
              background: ncMix(brand, 0.9),
              display: 'inline-flex', alignItems: 'center', gap: 3,
            }}>RECIPE ›</span>
          )}
        </div>
        <div style={{ fontSize: 11, color: T.ink2, fontWeight: 600, fontVariantNumeric: 'tabular-nums',
          flexShrink: 0 }}>{it.q}</div>
      </div>
      {hasNote && (
        <div style={{
          marginTop: 6, marginLeft: 13, padding: '6px 9px',
          borderRadius: 8, background: ncMix(T.sem.supp || brand, 0.92),
          fontSize: 11, color: T.ink2, lineHeight: 1.4,
          display: 'flex', gap: 6, alignItems: 'flex-start',
        }}>
          <span style={{ fontSize: 9, fontWeight: 700, color: ncDarken(T.sem.supp || brand, 0.3),
            letterSpacing: 0.4, flexShrink: 0, marginTop: 1 }}>NOTE</span>
          <span>{it.note}</span>
        </div>
      )}
      {hasAlts && (
        <div style={{ marginTop: 6, marginLeft: 13, display: 'flex', gap: 6,
          flexWrap: 'wrap', alignItems: 'center' }}>
          <span style={{ fontSize: 9, fontWeight: 700, color: T.ink3, letterSpacing: 0.4 }}>OR</span>
          {it.alts.map((a, ai) => (
            <span key={ai} style={{
              fontSize: 11, color: T.ink2, padding: '3px 8px', borderRadius: 999,
              background: T.bg, boxShadow: `inset 0 0 0 0.5px ${T.hair}`,
            }}>{a}</span>
          ))}
        </div>
      )}
    </div>
  );
}

function NCMacroBar({ label, value, target, unit, color, T }) {
  const pct = Math.min(100, Math.round(value / target * 100));
  return (
    <div>
      <div style={{ fontSize: 10, color: T.ink3, fontWeight: 600, letterSpacing: 0.3 }}>{label.toUpperCase()}</div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 3, marginTop: 2 }}>
        <span style={{ fontSize: 16, fontWeight: 700, color: T.ink }}>{value}</span>
        <span style={{ fontSize: 10, color: T.ink3 }}>/ {target}{unit}</span>
      </div>
      <div style={{ height: 4, background: T.hair, borderRadius: 2, marginTop: 6, overflow: 'hidden' }}>
        <div style={{ height: '100%', width: `${pct}%`, background: color, borderRadius: 2 }} />
      </div>
    </div>
  );
}

// ── WORKOUT: weekly schedule + today's session breakdown ─────────────
function NCRoutineWorkout({ T, brand }) {
  const [openSession, setOpenSession] = React.useState('lower');
  const week = [
    { d: 'Mon', focus: 'Lower', dur: 40, dot: T.sem.workout, today: true },
    { d: 'Tue', focus: 'Cardio', dur: 30, dot: T.sem.water },
    { d: 'Wed', focus: 'Upper', dur: 45, dot: T.sem.workout },
    { d: 'Thu', focus: 'Mobility', dur: 25, dot: T.sem.supp },
    { d: 'Fri', focus: 'Lower', dur: 40, dot: T.sem.workout },
    { d: 'Sat', focus: 'Long walk', dur: 60, dot: T.sem.water },
    { d: 'Sun', focus: 'Rest', dur: 0, dot: T.ink3 },
  ];
  const exercises = [
    { name: 'Goblet squat', sets: 4, reps: '10', rest: '60s', note: 'Heels flat, knees over toes' },
    { name: 'Romanian deadlift', sets: 3, reps: '10', rest: '90s', note: 'Hinge from hips, dumbbells' },
    { name: 'Reverse lunge', sets: 3, reps: '10/leg', rest: '60s', note: 'Step back, drop straight down' },
    { name: 'Glute bridge', sets: 3, reps: '12', rest: '45s', note: 'Squeeze top for 1 sec' },
    { name: 'Calf raise', sets: 3, reps: '15', rest: '30s', note: 'Slow eccentric' },
    { name: 'Plank', sets: 3, reps: '40s hold', rest: '30s', note: 'Neutral spine, glutes tight' },
  ];

  return (
    <>
      {/* Today's session card */}
      <div style={{
        margin: '14px 16px 0', padding: 16, borderRadius: 22,
        background: `linear-gradient(135deg, ${ncMix(T.sem.workout, 0.85)}, ${ncMix(brand, 0.88)})`,
        position: 'relative', overflow: 'hidden',
      }}>
        <div style={{ fontSize: 11, fontWeight: 700, color: ncDarken(T.sem.workout, 0.4), letterSpacing: 0.5 }}>
          TODAY · 17:30
        </div>
        <div style={{ fontSize: 24, fontWeight: 700, color: T.ink, letterSpacing: -0.5, marginTop: 4 }}>
          Lower body strength
        </div>
        <div style={{ fontSize: 12, color: T.ink2, marginTop: 4 }}>
          6 exercises · ~40 min · per coach Anita
        </div>
        <div style={{ display: 'flex', gap: 8, marginTop: 14 }}>
          <button style={{
            border: 0, background: T.ink, color: '#fff', borderRadius: 999,
            padding: '10px 16px', fontSize: 13, fontWeight: 600, fontFamily: T.font, cursor: 'pointer',
            display: 'flex', alignItems: 'center', gap: 6,
          }}>▶ Start session</button>
          <button style={{
            border: 0, background: 'rgba(255,255,255,0.7)', color: T.ink2, borderRadius: 999,
            padding: '10px 14px', fontSize: 13, fontWeight: 500, fontFamily: T.font, cursor: 'pointer',
          }}>Reschedule</button>
        </div>
      </div>

      {/* Weekly schedule */}
      <div style={{ padding: '20px 16px 0' }}>
        <div style={{ fontSize: 13, fontWeight: 600, color: T.ink2, marginBottom: 8, letterSpacing: -0.1 }}>
          This week
        </div>
        <div style={{ background: T.card, borderRadius: 18, overflow: 'hidden',
          boxShadow: '0 1px 2px rgba(14,26,36,0.05)' }}>
          {week.map((w, i) => (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', gap: 12, padding: '12px 14px',
              borderBottom: i < week.length - 1 ? `0.5px solid ${T.hair}` : 'none',
              background: w.today ? ncMix(brand, 0.94) : 'transparent',
            }}>
              <div style={{ width: 32, fontSize: 11, fontWeight: 600,
                color: w.today ? brand : T.ink3 }}>{w.d}</div>
              <div style={{ width: 8, height: 8, borderRadius: 4, background: w.dot }} />
              <div style={{ flex: 1, fontSize: 13, fontWeight: 500, color: T.ink }}>{w.focus}</div>
              <div style={{ fontSize: 11, color: T.ink3 }}>{w.dur ? `${w.dur} min` : '—'}</div>
              {w.today && <span style={{ fontSize: 9, fontWeight: 700, color: brand, letterSpacing: 0.4 }}>TODAY</span>}
            </div>
          ))}
        </div>
      </div>

      {/* Today's breakdown */}
      <div style={{ padding: '20px 16px 0' }}>
        <div style={{ fontSize: 13, fontWeight: 600, color: T.ink2, marginBottom: 8, letterSpacing: -0.1 }}>
          Today's exercises
        </div>
        <div style={{ background: T.card, borderRadius: 18,
          boxShadow: '0 1px 2px rgba(14,26,36,0.05)', overflow: 'hidden' }}>
          {exercises.map((e, i) => (
            <div key={i} style={{
              padding: '12px 14px', display: 'flex', alignItems: 'center', gap: 12,
              borderBottom: i < exercises.length - 1 ? `0.5px solid ${T.hair}` : 'none',
            }}>
              <div style={{
                width: 30, height: 30, borderRadius: 8, background: ncMix(T.sem.workout, 0.85),
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 11, fontWeight: 700, color: ncDarken(T.sem.workout, 0.3),
              }}>{i + 1}</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 13, fontWeight: 600, color: T.ink, letterSpacing: -0.1 }}>{e.name}</div>
                <div style={{ fontSize: 11, color: T.ink3, marginTop: 1, whiteSpace: 'nowrap',
                  overflow: 'hidden', textOverflow: 'ellipsis' }}>{e.note}</div>
              </div>
              <div style={{ textAlign: 'right' }}>
                <div style={{ fontSize: 12, fontWeight: 600, color: T.ink }}>{e.sets} × {e.reps}</div>
                <div style={{ fontSize: 10, color: T.ink3 }}>rest {e.rest}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

// ── GUIDELINES: rules from coach, grouped by category ────────────────
function NCRoutineGuidelines({ T, brand }) {
  const groups = [
    {
      cat: 'Hydration', icon: ncIcon.drop, color: T.sem.water,
      rules: [
        { t: 'Drink 8 glasses (≈2 L) per day', sub: 'Spread evenly; sip rather than chug' },
        { t: 'Start with warm water + lemon', sub: 'First thing after waking' },
        { t: 'Stop fluids 30 min before & during meals', sub: 'Better digestion' },
      ],
    },
    {
      cat: 'Eating habits', icon: ncIcon.diet, color: brand,
      rules: [
        { t: 'Fixed meal windows', sub: '8:00 · 10:30 · 12:30 · 16:00 · 19:30' },
        { t: 'Chew slowly · 20 min per meal', sub: 'Helps with satiety + glucose response' },
        { t: 'No screens during meals', sub: 'Mindful eating reduces overeating' },
        { t: 'Last meal by 8 PM', sub: 'Minimum 12 h overnight fast' },
      ],
    },
    {
      cat: 'Movement', icon: ncIcon.dumbbell, color: T.sem.workout,
      rules: [
        { t: 'Walk 20 min after lunch', sub: 'Improves post-meal glucose' },
        { t: '7,000+ steps daily', sub: 'Outside structured workouts' },
        { t: 'Stand every 45 min', sub: 'Quick stretch or walk' },
      ],
    },
    {
      cat: 'Sleep & recovery', icon: ncIcon.moon, color: T.sem.sleep,
      rules: [
        { t: '7–8 hours nightly', sub: 'Bed by 22:30, wake 06:30' },
        { t: 'No screens 30 min before bed', sub: 'Helps melatonin release' },
        { t: 'Bedroom cool & dark', sub: '18–20°C, blackout curtains' },
      ],
    },
    {
      cat: 'Avoid', icon: ncIcon.info, color: T.warn,
      rules: [
        { t: 'No refined sugar or sodas', sub: 'Honey & dates are okay in moderation' },
        { t: 'Limit fried & ultra-processed foods', sub: 'Once a week max' },
        { t: 'No alcohol on weekdays', sub: 'Light social drink on weekend OK' },
      ],
    },
  ];

  return (
    <div style={{ padding: '14px 16px 0' }}>
      {/* Coach note */}
      <div style={{
        padding: 14, borderRadius: 18, background: ncMix(brand, 0.92),
        display: 'flex', gap: 12, alignItems: 'flex-start', marginBottom: 16,
      }}>
        <div style={{
          width: 36, height: 36, borderRadius: 18,
          background: `linear-gradient(135deg, ${brand}, ${ncDarken(brand, 0.2)})`,
          color: '#fff', fontWeight: 700, fontSize: 13, letterSpacing: 0.2,
          display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
        }}>AS</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 11, fontWeight: 600, color: ncDarken(brand, 0.5), letterSpacing: 0.3 }}>FROM YOUR COACH</div>
          <div style={{ fontSize: 13, color: ncDarken(brand, 0.6), marginTop: 2, lineHeight: 1.45 }}>
            Anita Sharma · "Stick to fixed meal windows this week — it's the single biggest lever for steady energy."
          </div>
        </div>
      </div>

      {groups.map((g, gi) => (
        <div key={gi} style={{ marginBottom: 16 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
            <div style={{
              width: 24, height: 24, borderRadius: 6, background: ncMix(g.color, 0.85),
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>{g.icon(g.color)}</div>
            <div style={{ fontSize: 13, fontWeight: 700, color: T.ink, letterSpacing: -0.1 }}>{g.cat}</div>
          </div>
          <div style={{ background: T.card, borderRadius: 16, overflow: 'hidden',
            boxShadow: '0 1px 2px rgba(14,26,36,0.05)' }}>
            {g.rules.map((r, ri) => (
              <div key={ri} style={{
                padding: '12px 14px', display: 'flex', gap: 10, alignItems: 'flex-start',
                borderBottom: ri < g.rules.length - 1 ? `0.5px solid ${T.hair}` : 'none',
              }}>
                <div style={{
                  width: 18, height: 18, borderRadius: 9, marginTop: 1, flexShrink: 0,
                  background: ncMix(g.color, 0.85),
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>{ncIcon.check(g.color)}</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13, fontWeight: 500, color: T.ink, letterSpacing: -0.1 }}>{r.t}</div>
                  <div style={{ fontSize: 11, color: T.ink3, marginTop: 2, lineHeight: 1.4 }}>{r.sub}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}

// ── Timeline item (used by Today view) ───────────────────────────────
function NCTimelineItem({ T, brand, item, done, onToggle, onOpen }) {
  const isMeal = item.kind === 'meal';
  const isWorkout = item.kind === 'workout';
  const isWater = item.kind === 'water';
  const isSupp = item.kind === 'supplement';
  const isGuide = item.kind === 'guideline';
  const isSleep = item.kind === 'sleep';

  const kindCfg = isMeal ? { icon: null, c: brand, lbl: item.tag }
    : isWorkout ? { icon: ncIcon.dumbbell, c: T.sem.workout, lbl: 'WORKOUT' }
    : isWater ? { icon: ncIcon.drop, c: T.sem.water, lbl: 'HYDRATION' }
    : isSupp ? { icon: ncIcon.pill, c: T.sem.supp, lbl: 'SUPPLEMENT' }
    : isGuide ? { icon: ncIcon.info, c: T.ink3, lbl: 'GUIDELINE' }
    : isSleep ? { icon: ncIcon.moon, c: T.sem.sleep, lbl: 'SLEEP' }
    : { icon: null, c: T.ink3, lbl: '' };

  return (
    <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10, position: 'relative' }}>
      <div style={{ width: 38, flexShrink: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', paddingTop: 12 }}>
        <div style={{ fontSize: 10, color: T.ink3, fontWeight: 700, letterSpacing: 0.3 }}>{item.t}</div>
        <div style={{
          marginTop: 6, width: 14, height: 14, borderRadius: 7, zIndex: 1,
          background: done ? T.good : '#fff',
          border: done ? 'none' : `2px solid ${kindCfg.c}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>{done && ncIcon.check('#fff')}</div>
      </div>

      <div style={{
        flex: 1, padding: 12, borderRadius: 16,
        boxShadow: isGuide ? 'none' : '0 1px 2px rgba(14,26,36,0.05)',
        opacity: done ? 0.65 : 1,
        display: 'flex', gap: 12, alignItems: 'center',
        border: isGuide ? `1px dashed ${T.hair}` : 'none',
        background: isGuide ? 'transparent' : T.card,
      }}>
        {isMeal ? (
          <button onClick={onOpen} style={{ border: 0, padding: 0, background: 'transparent', cursor: 'pointer', flexShrink: 0 }}>
            <NCFoodSwatch tint={item.tint} w={52} h={52} r={12} />
          </button>
        ) : (
          <div style={{
            width: 38, height: 38, borderRadius: 10, flexShrink: 0,
            background: ncMix(kindCfg.c, 0.88),
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>{kindCfg.icon && kindCfg.icon(kindCfg.c)}</div>
        )}

        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
            <span style={{ fontSize: 9, fontWeight: 700, color: kindCfg.c, letterSpacing: 0.5 }}>{kindCfg.lbl}</span>
            {item.dur && <span style={{ fontSize: 10, color: T.ink3 }}>· {item.dur}</span>}
          </div>
          <div style={{
            fontSize: 14, fontWeight: 600, color: T.ink, marginTop: 1, letterSpacing: -0.2,
            textDecoration: done && !isGuide ? 'line-through' : 'none',
            textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap',
          }}>{item.title}</div>
          <div style={{ fontSize: 11, color: T.ink3, marginTop: 1,
            textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }}>{item.sub}</div>
          {isMeal && (
            <div style={{ display: 'flex', gap: 10, marginTop: 4 }}>
              <span style={{ fontSize: 10, color: T.ink2, display: 'flex', alignItems: 'center', gap: 3 }}>
                {ncIcon.flame(T.ink3)} {item.kcal}
              </span>
              <span style={{ fontSize: 10, color: T.ink2 }}>P {item.p}g</span>
            </div>
          )}
        </div>

        {!isGuide && (
          <button onClick={onToggle} style={{
            width: 28, height: 28, borderRadius: 14, border: 0, cursor: 'pointer', flexShrink: 0,
            background: done ? T.good : 'transparent',
            boxShadow: done ? 'none' : `inset 0 0 0 1.5px ${T.hair}`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>{done && ncIcon.check('#fff')}</button>
        )}
      </div>
    </div>
  );
}

// ═══ DIET · VARIANT A — Editorial day plan ══════════════════════════
function NCRoutineDietA({ brand, accent, theme, onOpenRecipe }) {
  const T = NCTokens({ themeKey: theme, brandColor: brand, accentColor: accent });
  const meals = dietMealsData();
  const totals = meals.reduce((a, m) => ({
    kcal: a.kcal + m.kcal, p: a.p + m.p, c: a.c + m.c, f: a.f + m.f,
  }), { kcal: 0, p: 0, c: 0, f: 0 });
  const target = 1800;
  const pct = Math.min(100, Math.round(totals.kcal / target * 100));

  return (
    <div style={{ paddingBottom: 110, background: T.bg, minHeight: '100%',
      fontFamily: T.font, color: T.ink }}>
      <div style={{ padding: '60px 20px 0', display: 'flex',
        alignItems: 'baseline', justifyContent: 'space-between' }}>
        <div style={{ fontSize: 28, fontWeight: 700, letterSpacing: -0.6 }}>Diet</div>
        <div style={{ fontSize: 12, color: T.ink3, fontWeight: 500 }}>Week 6 · Mon</div>
      </div>

      <div style={{ padding: '20px 20px 0' }}>
        <div style={{ fontSize: 11, color: T.ink3, fontWeight: 600, letterSpacing: 0.5 }}>TODAY · 1,800 KCAL TARGET</div>
        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 12, marginTop: 4 }}>
          <div style={{ fontSize: 64, fontWeight: 700, color: T.ink, letterSpacing: -2.5,
            lineHeight: 0.95, fontVariantNumeric: 'tabular-nums' }}>{totals.kcal.toLocaleString()}</div>
          <div style={{ paddingBottom: 8 }}>
            <div style={{ fontSize: 13, color: T.ink2, fontWeight: 600 }}>{pct}% of plan</div>
            <div style={{ fontSize: 11, color: T.good, fontWeight: 600 }}>On track</div>
          </div>
        </div>
        <div style={{ marginTop: 14, display: 'flex', height: 4, borderRadius: 2,
          overflow: 'hidden', background: T.hair }}>
          <div style={{ flex: totals.p, background: brand }} />
          <div style={{ flex: totals.c, background: T.sem.water }} />
          <div style={{ flex: totals.f, background: T.sem.workout }} />
        </div>
        <div style={{ display: 'flex', gap: 16, marginTop: 8, fontSize: 11 }}>
          <span style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
            <span style={{ width: 7, height: 7, borderRadius: 2, background: brand }} />
            <span style={{ color: T.ink2, fontWeight: 600 }}>P {totals.p}g</span>
          </span>
          <span style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
            <span style={{ width: 7, height: 7, borderRadius: 2, background: T.sem.water }} />
            <span style={{ color: T.ink2, fontWeight: 600 }}>C {totals.c}g</span>
          </span>
          <span style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
            <span style={{ width: 7, height: 7, borderRadius: 2, background: T.sem.workout }} />
            <span style={{ color: T.ink2, fontWeight: 600 }}>F {totals.f}g</span>
          </span>
        </div>
      </div>

      <div style={{ margin: '24px 20px 0', height: 1, background: T.hair }} />

      <div style={{ padding: '4px 20px 0' }}>
        {meals.map((m, mi) => (
          <NCDietAMeal key={m.id} m={m} T={T} brand={brand}
            onOpenItem={(it) => onOpenRecipe && onOpenRecipe({ ...it.recipe })}
            last={mi === meals.length - 1} />
        ))}
      </div>
    </div>
  );
}

function NCDietAMeal({ m, T, brand, onOpenItem, last }) {
  return (
    <div style={{ padding: '24px 0',
      borderBottom: last ? 'none' : `1px solid ${T.hair}` }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 10 }}>
        <div style={{ fontSize: 28, fontWeight: 700, color: T.ink, letterSpacing: -0.8,
          fontVariantNumeric: 'tabular-nums' }}>{m.t}</div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 9, fontWeight: 700, color: brand, letterSpacing: 0.6 }}>{m.tag}</div>
          <div style={{ fontSize: 16, fontWeight: 600, color: T.ink, letterSpacing: -0.3, marginTop: 1 }}>{m.title}</div>
        </div>
        <div style={{ textAlign: 'right' }}>
          <div style={{ fontSize: 13, fontWeight: 700, color: T.ink, fontVariantNumeric: 'tabular-nums' }}>{m.kcal}</div>
          <div style={{ fontSize: 9, color: T.ink3, fontWeight: 600, letterSpacing: 0.4 }}>KCAL</div>
        </div>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {m.items.map((it, i) => (
          <div key={i}>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
              <span style={{ fontSize: 10, color: T.ink3, fontWeight: 600,
                fontVariantNumeric: 'tabular-nums', minWidth: 14 }}>{String(i + 1).padStart(2, '0')}</span>
              <span style={{ flex: 1, fontSize: 13, color: T.ink, lineHeight: 1.4 }}>
                <span>{it.n}</span>
                <span style={{ color: T.ink3 }}> · {it.q}</span>
                {it.recipe && (
                  <button onClick={() => onOpenItem(it)} style={{
                    border: 0, background: 'transparent', cursor: 'pointer', padding: 0,
                    marginLeft: 6, fontFamily: T.font, fontSize: 11, fontWeight: 600,
                    color: brand, letterSpacing: 0.1,
                  }}>recipe ›</button>
                )}
              </span>
            </div>
            {it.note && (
              <div style={{ marginLeft: 24, marginTop: 3, fontSize: 11,
                color: T.ink3, fontStyle: 'italic', lineHeight: 1.4 }}>— {it.note}</div>
            )}
            {it.alts && it.alts.length > 0 && (
              <div style={{ marginLeft: 24, marginTop: 4, fontSize: 11, color: T.ink3, lineHeight: 1.4 }}>
                <span style={{ fontWeight: 700, color: T.ink2, letterSpacing: 0.3 }}>OR </span>
                {it.alts.join(' · ')}
              </div>
            )}
          </div>
        ))}
      </div>
    </div>
  );
}

// ═══ DIET · VARIANT B — Macro doughnut + accordion agenda ═══════════
function NCRoutineDietB({ brand, accent, theme, onOpenRecipe }) {
  const T = NCTokens({ themeKey: theme, brandColor: brand, accentColor: accent });
  const meals = dietMealsData();
  const [open, setOpen] = React.useState({ lunch: true });
  const totals = meals.reduce((a, m) => ({
    kcal: a.kcal + m.kcal, p: a.p + m.p, c: a.c + m.c, f: a.f + m.f,
  }), { kcal: 0, p: 0, c: 0, f: 0 });

  const pK = totals.p * 4, cK = totals.c * 4, fK = totals.f * 9;
  const macroKcal = pK + cK + fK || 1;
  const segs = [
    { v: pK / macroKcal, c: brand },
    { v: cK / macroKcal, c: T.sem.water },
    { v: fK / macroKcal, c: T.sem.workout },
  ];
  const R = 44, C = 2 * Math.PI * R;
  let acc = 0;

  return (
    <div style={{ paddingBottom: 110, background: T.bg, minHeight: '100%',
      fontFamily: T.font, color: T.ink }}>
      <div style={{ padding: '60px 20px 0', display: 'flex', alignItems: 'baseline',
        justifyContent: 'space-between' }}>
        <div style={{ fontSize: 28, fontWeight: 700, letterSpacing: -0.6 }}>Diet</div>
        <button style={{ border: 0, background: 'transparent', color: brand,
          fontWeight: 600, fontSize: 13, cursor: 'pointer' }}>Mon ›</button>
      </div>

      <div style={{ margin: '14px 16px 0', padding: 16, borderRadius: 22,
        background: T.card, boxShadow: '0 1px 2px rgba(14,26,36,0.05)',
        display: 'flex', alignItems: 'center', gap: 18 }}>
        <div style={{ position: 'relative', width: 110, height: 110, flexShrink: 0 }}>
          <svg width="110" height="110" viewBox="0 0 110 110" style={{ transform: 'rotate(-90deg)' }}>
            <circle cx="55" cy="55" r={R} stroke={T.hair} strokeWidth="10" fill="none" />
            {segs.map((s, i) => {
              const offset = -acc * C;
              const dash = `${s.v * C} ${C}`;
              acc += s.v;
              return (
                <circle key={i} cx="55" cy="55" r={R} stroke={s.c} strokeWidth="10"
                  fill="none" strokeDasharray={dash} strokeDashoffset={offset} />
              );
            })}
          </svg>
          <div style={{ position: 'absolute', inset: 0, display: 'flex',
            alignItems: 'center', justifyContent: 'center', flexDirection: 'column' }}>
            <div style={{ fontSize: 22, fontWeight: 700, color: T.ink, letterSpacing: -0.5,
              fontVariantNumeric: 'tabular-nums', lineHeight: 1 }}>{totals.kcal}</div>
            <div style={{ fontSize: 9, color: T.ink3, fontWeight: 600, letterSpacing: 0.4, marginTop: 2 }}>OF 1,800</div>
          </div>
        </div>
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 8 }}>
          <NCDietBStat color={brand} label="Protein" v={totals.p} t={120} u="g" T={T} />
          <NCDietBStat color={T.sem.water} label="Carbs" v={totals.c} t={210} u="g" T={T} />
          <NCDietBStat color={T.sem.workout} label="Fat" v={totals.f} t={65} u="g" T={T} />
        </div>
      </div>

      <div style={{ padding: '20px 20px 8px', display: 'flex',
        alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ fontSize: 13, fontWeight: 700, color: T.ink, letterSpacing: -0.1 }}>
          {meals.length} meals · {meals.reduce((a, m) => a + m.items.length, 0)} items
        </div>
      </div>

      <div style={{ margin: '0 16px', background: T.card, borderRadius: 18,
        boxShadow: '0 1px 2px rgba(14,26,36,0.05)', overflow: 'hidden' }}>
        {meals.map((m, mi) => (
          <NCDietBRow key={m.id} m={m} T={T} brand={brand}
            isOpen={!!open[m.id]} onToggle={() => setOpen(o => ({ ...o, [m.id]: !o[m.id] }))}
            onOpenItem={(it) => onOpenRecipe && onOpenRecipe({ ...it.recipe })}
            last={mi === meals.length - 1} />
        ))}
      </div>
    </div>
  );
}

function NCDietBStat({ color, label, v, t, u, T }) {
  const pct = Math.min(100, Math.round(v / t * 100));
  return (
    <div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
        <span style={{ width: 7, height: 7, borderRadius: 2, background: color }} />
        <span style={{ fontSize: 11, color: T.ink2, fontWeight: 600 }}>{label}</span>
        <span style={{ fontSize: 11, color: T.ink, fontWeight: 700, marginLeft: 'auto',
          fontVariantNumeric: 'tabular-nums' }}>{v}<span style={{ color: T.ink3, fontWeight: 500 }}>/{t}{u}</span></span>
      </div>
      <div style={{ height: 3, background: T.hair, borderRadius: 2, marginTop: 4, overflow: 'hidden' }}>
        <div style={{ height: '100%', width: `${pct}%`, background: color, borderRadius: 2 }} />
      </div>
    </div>
  );
}

function NCDietBRow({ m, T, brand, isOpen, onToggle, onOpenItem, last }) {
  return (
    <div style={{ borderBottom: last ? 'none' : `0.5px solid ${T.hair}` }}>
      <button onClick={onToggle} style={{
        width: '100%', border: 0, background: 'transparent', cursor: 'pointer',
        padding: '14px 14px', textAlign: 'left', fontFamily: T.font,
        display: 'flex', alignItems: 'center', gap: 12,
      }}>
        <div style={{
          width: 42, height: 42, borderRadius: 10, flexShrink: 0,
          background: ncMix(brand, 0.9), color: ncDarken(brand, 0.4),
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 11, fontWeight: 700, fontVariantNumeric: 'tabular-nums',
        }}>{m.t}</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 9, fontWeight: 700, color: brand, letterSpacing: 0.5 }}>{m.tag}</div>
          <div style={{ fontSize: 14, fontWeight: 600, color: T.ink, marginTop: 1, letterSpacing: -0.2,
            whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{m.title}</div>
          <div style={{ fontSize: 11, color: T.ink3, marginTop: 1 }}>
            {m.kcal} kcal · {m.items.length} items
          </div>
        </div>
        <div style={{
          width: 22, height: 22, flexShrink: 0,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: T.ink3, fontSize: 11, fontWeight: 700,
          transform: isOpen ? 'rotate(180deg)' : 'none', transition: 'transform 0.15s',
        }}>▾</div>
      </button>
      {isOpen && (
        <div style={{ padding: '0 14px 14px', display: 'flex', flexDirection: 'column', gap: 8 }}>
          {m.items.map((it, i) => (
            <div key={i} style={{
              padding: '10px 12px', borderRadius: 12, background: T.bg,
              boxShadow: `inset 0 0 0 0.5px ${T.hair}`,
            }}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
                <div style={{ flex: 1, minWidth: 0, fontSize: 13, color: T.ink, lineHeight: 1.35 }}>
                  {it.n}
                  {it.recipe && (
                    <button onClick={() => onOpenItem(it)} style={{
                      border: 0, background: ncMix(brand, 0.88), cursor: 'pointer',
                      marginLeft: 6, padding: '2px 7px', borderRadius: 999,
                      fontSize: 9, fontWeight: 700, color: brand, letterSpacing: 0.4,
                      fontFamily: T.font, verticalAlign: 'middle',
                    }}>RECIPE ›</button>
                  )}
                </div>
                <div style={{ fontSize: 11, color: T.ink2, fontWeight: 600,
                  fontVariantNumeric: 'tabular-nums', flexShrink: 0 }}>{it.q}</div>
              </div>
              {it.note && (
                <div style={{ marginTop: 6, fontSize: 11, color: T.ink2, lineHeight: 1.4,
                  display: 'flex', gap: 6, alignItems: 'flex-start' }}>
                  <span style={{ fontSize: 9, fontWeight: 700, color: ncDarken(brand, 0.3),
                    letterSpacing: 0.4, flexShrink: 0, marginTop: 1 }}>NOTE</span>
                  <span>{it.note}</span>
                </div>
              )}
              {it.alts && it.alts.length > 0 && (
                <div style={{ marginTop: 6, display: 'flex', gap: 5,
                  flexWrap: 'wrap', alignItems: 'center' }}>
                  <span style={{ fontSize: 9, fontWeight: 700, color: T.ink3, letterSpacing: 0.4 }}>OR</span>
                  {it.alts.map((a, ai) => (
                    <span key={ai} style={{
                      fontSize: 11, color: T.ink2, padding: '2px 8px', borderRadius: 999,
                      background: '#fff', boxShadow: `inset 0 0 0 0.5px ${T.hair}`,
                    }}>{a}</span>
                  ))}
                </div>
              )}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { NCRoutine, NCRoutineDietA, NCRoutineDietB });