function TodayScreen({onOpenSwap,logged,setLogged}){
  return (<div style={{position:'relative',flex:1,overflowY:'auto'}}>
    <Mesh opacity={.7} style={{inset:'-40% -30% auto -30%',height:420}} />
    <div style={{position:'relative'}}>
      <ScreenHeader eyebrow="Tuesday · Week 3" title="Today" right={<IconButton icon="bell" label="Notifications" tone="card" />} />
      <div style={{padding:'0 20px 110px',display:'flex',flexDirection:'column',gap:14}}>
        <Card tone="glass" padding="md" radius="xl">
          <div style={{display:'flex',gap:18,alignItems:'center'}}>
            <ProgressRing value={1520} max={2100} size={112} label="580" caption="kcal left" />
            <div style={{flex:1,minWidth:0,display:'flex',flexDirection:'column',gap:10}}>
              <MacroBar items={[{key:'protein',value:118},{key:'carbs',value:186},{key:'fat',value:61}]} />
              <Badge tone="success" dot>Fibre on track</Badge>
            </div>
          </div>
        </Card>
        <Card tone="verdant" radius="xl" padding="md" style={{display:'flex',gap:14,alignItems:'flex-start'}}>
          <AgentOrb size={40} state="idle" />
          <div style={{flex:1}}>
            <div style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:17,marginBottom:4}}>You're low on iron this week</div>
            <div style={{fontSize:14,opacity:.86,lineHeight:1.5}}>I've put lentils in Thursday's dinner. Want me to explain why?</div>
            <div style={{display:'flex',gap:8,marginTop:12}}>
              <Button size="sm" variant="primary">Tell me more</Button>
              <Button size="sm" variant="ghost" style={{color:'#fff'}}>Not now</Button>
            </div>
          </div>
        </Card>
        <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginTop:4}}>
          <span style={{fontSize:11,fontWeight:700,letterSpacing:'.1em',textTransform:'uppercase',color:'var(--text-subtle)'}}>Your meals</span>
          <Tabs items={['Day','Week']} value="Day" onChange={()=>{}} style={{transform:'scale(.9)',transformOrigin:'right'}} />
        </div>
        <MealCard slot="Breakfast" name="Greek yoghurt & berry bowl" kcal={410} macros="P 32g · C 41g · F 12g" logged onLog={()=>{}} />
        <MealCard slot="Lunch" name="Harissa chickpea bowl" kcal={520} macros="P 28g · C 54g · F 18g" tags={['High fibre']} logged={logged} onLog={()=>setLogged(!logged)} onSwap={onOpenSwap} />
        <MealCard slot="Dinner" name="Miso salmon, greens & rice" kcal={610} macros="P 44g · C 52g · F 22g" onLog={()=>{}} onSwap={onOpenSwap} />
        <MealCard slot="Snack" name="Apple & almond butter" kcal={190} macros="P 5g · C 24g · F 9g" onLog={()=>{}} />
      </div>
    </div>
  </div>);
}
Object.assign(window,{TodayScreen});