// ============================================================
// hifi-mobile.jsx — Mobile App core (PhoneShell + helpers + core screens)
// Registers window.MOBILE_SCREENS; hifi-mobile-b.jsx adds the rest.
// ============================================================
const MTABS = [['home','Home'],['device','Devices'],['comms','Comms'],['bell','Alerts']];

function PhoneShell({children, cui=true}){
  return (
    <div style={{height:'100%',background:'radial-gradient(130% 100% at 50% 0%, #0A1A38, #02091C)',display:'flex',alignItems:'center',justifyContent:'center'}}>
      <div className="hf-phone">
        <div className="hf-screen">
          <div className="hf-island"/>
          <div className="hf-statusbar"><span>9:41</span><Row gap={6} align="center"><Bars/><Icon k="bolt" size={13}/></Row></div>
          {cui&&<div style={{height:17,display:'flex',alignItems:'center',justifyContent:'center',gap:6,background:'#120E05',borderBottom:'1px solid #2A2008',fontFamily:'var(--mono)',fontSize:8,letterSpacing:'.14em',color:'var(--cui)',flex:'none'}}><span style={{width:4,height:4,borderRadius:'50%',background:'var(--cui)'}}/>CUI // ITAR</div>}
          {children}
        </div>
      </div>
    </div>
  );
}
const MTabBar = ({active='Home'}) => (
  <div className="hf-tabbar">{MTABS.map((t,i)=><div key={i} className={'tb'+(t[1]===active?' active':'')}><Icon k={t[0]} size={21}/>{t[1]}</div>)}</div>
);
const AppBar = ({title, right, back}) => (
  <Row justify="space-between" align="center" style={{padding:'13px 18px 10px',flex:'none'}}>
    <Row gap={10} align="center">{back&&<span style={{fontSize:19,color:'var(--text-mute)'}}>‹</span>}<div style={{fontSize:17,fontWeight:700,color:'var(--paper)'}}>{title}</div></Row>
    {right}
  </Row>
);
const StatusBand = ({s='ok', name='AC-7740', sub='SN 7740-AC-22 · BLE'}) => {
  const c=`var(--${s})`;
  return <div style={{background:`linear-gradient(180deg, color-mix(in srgb,${c} 30%,var(--panel-1)), var(--panel-1))`,borderBottom:`1px solid color-mix(in srgb,${c} 40%,transparent)`,padding:'13px 16px',flex:'none'}}>
    <Row gap={9} align="center"><span className="hf-dot" style={{background:c,boxShadow:`0 0 8px ${c}`}}/><div style={{fontSize:16,fontWeight:700,color:'var(--paper)'}}>{name}</div><Badge s={s} style={{marginLeft:'auto'}}/></Row>
    <div className="hf-mono" style={{fontSize:10,color:'var(--text-dim)',marginTop:4}}>{sub}</div>
  </div>;
};
const MBody = ({children, pad='12px 16px', tab}) => (
  <React.Fragment>
    <div style={{flex:1,overflow:'hidden',padding:pad}}>{children}</div>
    {tab&&<MTabBar active={tab}/>}
  </React.Fragment>
);
const GestureCard = ({name, shortcut, source, restricted, disabled}) => (
  <div className="hf-card" style={{padding:'13px 14px',opacity:disabled?.55:1}}>
    <Row justify="space-between" align="flex-start" gap={11}>
      <div style={{width:34,height:34,borderRadius:9,background:'var(--panel-2)',border:'1px solid var(--line)',display:'flex',alignItems:'center',justifyContent:'center',color:'var(--taupe)',flex:'none'}}><Icon k="bolt" size={17}/></div>
      <div style={{flex:1,minWidth:0}}>
        <div style={{fontSize:14.5,fontWeight:600,color:'var(--paper)',whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{name}</div>
        <div className="hf-mono" style={{fontSize:11,color:'var(--text-dim)',marginTop:2,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>→ {shortcut}</div>
        <Row gap={6} style={{marginTop:8}} wrap>
          {source&&<span className="hf-chip" style={{fontSize:9,color:source==='Personal'?'var(--text-dim)':'var(--maint)',borderColor:source==='Personal'?'var(--line)':'color-mix(in srgb,var(--maint) 50%,transparent)'}}>{source==='Personal'?'PERSONAL':'TEAM TEMPLATE'}</span>}
          {restricted&&<span className="hf-chip" style={{fontSize:9,color:'var(--crit)',borderColor:'color-mix(in srgb,var(--crit) 50%,transparent)'}}>RESTRICTED</span>}
        </Row>
      </div>
      <Icon k="list" size={16} style={{color:'var(--text-mute)',flex:'none'}}/>
    </Row>
  </div>
);

/* ---------------- LOGIN ---------------- */
function MLogin(){
  return (
    <PhoneShell cui={false}>
      <div style={{flex:1,position:'relative',display:'flex',flexDirection:'column',padding:'0 22px',background:'radial-gradient(110% 70% at 50% 0%, #0A1C40, #02091C)'}}>
        <div style={{position:'absolute',inset:0,opacity:.06,display:'flex',alignItems:'center',justifyContent:'center'}}><AegisMark size={320} color="var(--taupe)"/></div>
        <div style={{flex:1,display:'flex',flexDirection:'column',justifyContent:'center',gap:18,position:'relative'}}>
          <div style={{textAlign:'center'}}><AegisMark size={52} color="var(--taupe)" glow/><div className="hf-wordmark" style={{fontSize:26,marginTop:12}}>Aegis Cognis</div><div className="hf-label" style={{marginTop:3}}>Field Operations</div></div>
          <Field label="Organization" value="JSOC Task Force Alpha ▾"/>
          <Btn variant="accent" block lg>Sign in with SSO</Btn>
          <div style={{textAlign:'center'}}><span className="hf-label" style={{fontSize:11,color:'var(--maint)'}}>Sign in with credentials</span></div>
        </div>
        <Row justify="space-between" style={{paddingBottom:22,position:'relative'}}><span className="hf-label" style={{fontSize:9.5}}>Forgot password</span><span className="hf-label" style={{fontSize:9.5}}>Contact admin</span></Row>
      </div>
    </PhoneShell>
  );
}

/* ---------------- HOME ---------------- */
function MHome(){
  return (
    <PhoneShell>
      <div style={{padding:'8px 14px',background:'color-mix(in srgb,var(--ok) 12%,transparent)',borderBottom:'1px solid color-mix(in srgb,var(--ok) 30%,transparent)',display:'flex',alignItems:'center',justifyContent:'center',gap:8,flex:'none'}}><span className="hf-dot" style={{background:'var(--ok)',boxShadow:'0 0 6px var(--ok)'}}/><span className="hf-label" style={{fontSize:9.5,color:'var(--ok)'}}>Online · synced 2s ago</span></div>
      <AppBar title="Hi, M. Operator"/>
      <MBody tab="Home">
        <Lbl>My Devices</Lbl>
        <Row gap={10} style={{marginTop:8,overflow:'hidden'}}>
          {[['ok','AC-7740',.9],['warn','AC-7741',.62],['ok','AC-3320',.84]].map((d,i)=>(
            <div key={i} className="hf-card" style={{width:118,flex:'none',padding:12}}>
              <Row justify="space-between" align="flex-start"><div style={{width:24,height:24,borderRadius:7,background:'var(--panel-2)',border:'1px solid var(--line)',display:'flex',alignItems:'center',justifyContent:'center',color:'var(--taupe)'}}><Icon k="device" size={13}/></div><Ring size={26} pct={d[2]} s={d[0]==='warn'?'warn':'ok'}/></Row>
              <Mono style={{fontSize:12,color:'var(--paper)',display:'block',marginTop:8}}>{d[1]}</Mono>
              <Row gap={5} align="center" style={{marginTop:4}}><Dot s={d[0]}/><span className="hf-label" style={{fontSize:8.5}}>{STATUS[d[0]]}</span></Row>
            </div>
          ))}
        </Row>
        <div className="hf-card" style={{padding:12,marginTop:14,borderLeft:'3px solid var(--crit)',display:'flex',alignItems:'center',gap:11}}>
          <span style={{width:26,height:26,borderRadius:'50%',background:'var(--crit)',color:'#fff',display:'flex',alignItems:'center',justifyContent:'center',fontFamily:'var(--mono)',fontSize:12,boxShadow:'0 0 10px var(--crit)'}}>3</span>
          <div style={{flex:1}}><div style={{fontSize:12.5,fontWeight:600,color:'var(--paper)'}}>Critical: AC-9008 diagnostic failure</div><span className="hf-label" style={{fontSize:9}}>Tap to view all alerts</span></div>
        </div>
        <Row gap={10} style={{marginTop:14}}>
          <Btn variant="accent" style={{flex:1,padding:'14px 6px'}}>＋ Pair Device</Btn>
          <Btn style={{flex:1,padding:'14px 6px'}}><Icon k="comms" size={15}/> Open Comms</Btn>
        </Row>
        <Lbl style={{marginTop:16}}>Recent Activity</Lbl>
        <Col gap={9} style={{marginTop:8}}>
          {[['ok','AC-7740 online','2h'],['maint','AC-3320 firmware','3h'],['warn','AC-7741 cal due','5h']].map((a,i)=>(<Row key={i} gap={9} align="center"><Dot s={a[0]}/><span style={{flex:1,fontSize:12,color:'var(--text-dim)'}}>{a[1]}</span><span className="hf-mono" style={{fontSize:10,color:'var(--text-mute)'}}>{a[2]}</span></Row>))}
        </Col>
      </MBody>
    </PhoneShell>
  );
}

/* ---------------- DEVICES ---------------- */
function MDevices(){
  return (
    <PhoneShell>
      <AppBar title="Devices"/>
      <div style={{padding:'0 14px 10px',flex:'none'}}><div style={{height:36,borderRadius:18,background:'var(--void)',border:'1px solid var(--line-soft)',display:'flex',alignItems:'center',gap:8,padding:'0 14px'}}><Icon k="search" size={14} style={{color:'var(--text-mute)'}}/><span className="hf-label" style={{fontSize:10,textTransform:'none',letterSpacing:0}}>Search team devices…</span></div>
        <div style={{textAlign:'center',marginTop:8}}><span className="hf-label" style={{fontSize:9}}>↻ Pull to refresh · updated 2m ago</span></div>
      </div>
      <MBody pad="0 14px" tab="Devices">
        <Col gap={9}>
          {[['ok','AC-7740','Sensor',.9,'strong'],['warn','AC-7741','Sensor',.62,'weak'],['ok','AC-3320','Relay',.84,'strong'],['off','AC-5512','Relay',0,'—']].map((d,i)=>(
            <div key={i} className="hf-card" style={{padding:'12px 13px',display:'flex',alignItems:'center',gap:11}}>
              <div style={{width:32,height:32,borderRadius:8,background:'var(--panel-2)',border:'1px solid var(--line)',display:'flex',alignItems:'center',justifyContent:'center',color:'var(--taupe)',flex:'none'}}><Icon k="device" size={16}/></div>
              <div style={{flex:1,minWidth:0}}><Mono style={{fontSize:13,color:'var(--paper)'}}>{d[1]}</Mono><Row gap={6} align="center" style={{marginTop:3}}><Dot s={d[0]}/><span className="hf-label" style={{fontSize:9}}>{d[2]} · {d[4]} signal</span></Row></div>
              {d[0]==='off'?<span className="hf-label" style={{fontSize:9}}>stale 3d</span>:<Ring size={26} pct={d[3]} s={d[0]==='warn'?'warn':'ok'}/>}
              <span className="hf-label" style={{fontSize:13}}>›</span>
            </div>
          ))}
        </Col>
      </MBody>
    </PhoneShell>
  );
}

/* ---------------- DEVICE DETAIL — STATUS ---------------- */
function MDetail(){
  return (
    <PhoneShell>
      <StatusBand sub="SN 7740-AC-22 · USB ⎓"/>
      <MBody tab="Devices">
        <Seg items={['Status','Health','Loc','Actions','Gest']} active="Status"/>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10,marginTop:12}}>
          <div className="hf-card" style={{padding:13,display:'flex',flexDirection:'column',alignItems:'center',gap:7}}><Ring size={42} pct={.9} s="ok"/><span className="hf-label" style={{fontSize:9}}>Battery 90%</span></div>
          <div className="hf-card" style={{padding:13,display:'flex',flexDirection:'column',alignItems:'center',gap:7}}><div style={{height:42,display:'flex',alignItems:'center'}}><Bars/></div><span className="hf-label" style={{fontSize:9}}>Signal strong</span></div>
          <div className="hf-card" style={{padding:13}}><Lbl style={{fontSize:9}}>GPS Fix</Lbl><div style={{fontSize:13,fontWeight:600,color:'var(--paper)',marginTop:4}}>3D · 6 sats</div></div>
          <div className="hf-card" style={{padding:13}}><Lbl style={{fontSize:9}}>State</Lbl><div style={{fontSize:13,fontWeight:600,color:'var(--ok)',marginTop:4}}>Operational</div></div>
        </div>
        <div className="hf-card" style={{padding:13,marginTop:10}}><Lbl style={{fontSize:9}}>Last comms</Lbl><Mono style={{fontSize:12,color:'var(--paper)',display:'block',marginTop:4}}>14:02:11 · 2m ago</Mono></div>
      </MBody>
    </PhoneShell>
  );
}

/* ---------------- DEVICE DETAIL — HEALTH ---------------- */
function MHealth(){
  return (
    <PhoneShell>
      <StatusBand sub="SN 7740-AC-22 · BLE"/>
      <MBody tab="Devices">
        <Seg items={['Status','Health','Loc','Actions','Gest']} active="Health"/>
        <Row justify="flex-end" style={{marginTop:12}}><Seg items={['24h','7d','30d']} active="7d"/></Row>
        <Col gap={10} style={{marginTop:10}}>
          {[['Battery','90%','ok'],['Signal','-62 dBm','maint'],['Temperature','38°C','warn']].map((c,i)=>(
            <div key={i} className="hf-card" style={{padding:12}}><Row justify="space-between" align="center"><Lbl style={{fontSize:9.5}}>{c[0]}</Lbl><Mono style={{fontSize:12,color:'var(--paper)'}}>{c[1]}</Mono></Row><div style={{marginTop:6}}><Spark w={296} h={32} color={`var(--${c[2]})`}/></div></div>
          ))}
        </Col>
      </MBody>
    </PhoneShell>
  );
}

/* ---------------- DEVICE DETAIL — ACTIONS ---------------- */
function MActions(){
  return (
    <PhoneShell>
      <StatusBand sub="SN 7740-AC-22 · USB ⎓"/>
      <MBody tab="Devices">
        <Seg items={['Status','Health','Loc','Actions','Gest']} active="Actions"/>
        <Col gap={9} style={{marginTop:12}}>
          {[['Unpair Device','device'],['Restart Device','bolt'],['Run Field Diagnostic','flask'],['Send Test Message','comms'],['Report Issue','report']].map((a,i)=>(
            <div key={i} className="hf-card" style={{padding:'14px 13px',display:'flex',alignItems:'center',gap:11}}><Icon k={a[1]} size={17} style={{color:'var(--taupe)'}}/><span style={{fontSize:13,color:'var(--text)',flex:1}}>{a[0]}</span><span className="hf-label" style={{fontSize:13}}>›</span></div>
          ))}
        </Col>
      </MBody>
    </PhoneShell>
  );
}

/* ---------------- LIBRARY (hero) ---------------- */
function Library(){
  return (
    <PhoneShell>
      <div className="hf-armed"><span className="pulse"/>Gestures Armed · Recognition Active</div>
      <AppBar title="AC-7740 Gestures" back right={<Badge s="ok" label="BLE · IMU" style={{fontSize:9}}/>}/>
      <div style={{flex:1,overflow:'hidden',padding:'4px 16px 0'}}>
        <div className="hf-card hf-glow" style={{padding:'15px 16px',borderColor:'color-mix(in srgb,var(--ok) 40%,transparent)',background:'color-mix(in srgb,var(--ok) 10%,var(--panel-1))',display:'flex',alignItems:'center',justifyContent:'space-between'}}>
          <div><Row gap={8} align="center"><span className="hf-dot" style={{background:'var(--ok)',boxShadow:'0 0 8px var(--ok)'}}/><span className="hf-display" style={{fontSize:24,color:'var(--ok)'}}>Armed</span></Row><div className="hf-label" style={{marginTop:3}}>Recognition active</div></div>
          <Toggle on/>
        </div>
        <Row justify="space-between" align="center" style={{margin:'18px 2px 10px'}}><Lbl>Gesture Library · 3</Lbl><span className="hf-label" style={{color:'var(--taupe)'}}>▾ Templates</span></Row>
        <Col gap={10}>
          <GestureCard name="Up-down sweep" shortcut="Request Backup" source="Personal"/>
          <GestureCard name="Figure-8" shortcut="Mark Waypoint" source="Team"/>
          <GestureCard name="Double-flick" shortcut="Recall Drone" restricted disabled/>
        </Col>
      </div>
      <div style={{position:'absolute',right:20,bottom:104,zIndex:20}}><div className="hf-fab"><Icon k="bolt" size={24} sw={2}/></div></div>
      <MTabBar active="Devices"/>
    </PhoneShell>
  );
}

/* ---------------- CONFIRM (hero) ---------------- */
function Confirm(){
  const r=46,C=2*Math.PI*r,pct=.62;
  return (
    <PhoneShell>
      <div className="hf-armed"><span className="pulse"/>Gestures Armed · Recognition Active</div>
      <div style={{position:'absolute',inset:0,top:80,opacity:.18,padding:'0 16px',pointerEvents:'none'}}><Col gap={10} style={{marginTop:20}}>{[0,1,2].map(i=><div key={i} className="hf-card" style={{height:74}}/>)}</Col></div>
      <div style={{position:'absolute',inset:0,background:'rgba(0,4,12,.74)',backdropFilter:'blur(3px)'}}/>
      <div style={{position:'absolute',left:18,right:18,top:'50%',transform:'translateY(-50%)',zIndex:10}}>
        <div className="hf-card hf-glow" style={{padding:'26px 22px',textAlign:'center',background:'var(--panel-1)',borderColor:'var(--line)'}}>
          <Eyebrow>Gesture Recognized</Eyebrow>
          <Display size={42} style={{marginTop:10}}>Up-down<br/>Sweep</Display>
          <div style={{position:'relative',width:116,height:116,margin:'20px auto 6px'}}>
            <svg width="116" height="116" viewBox="0 0 116 116"><circle cx="58" cy="58" r={r} fill="none" stroke="var(--line)" strokeWidth="6"/><circle cx="58" cy="58" r={r} fill="none" stroke="var(--taupe)" strokeWidth="6" strokeLinecap="round" strokeDasharray={`${pct*C} ${C}`} transform="rotate(-90 58 58)" style={{filter:'drop-shadow(0 0 8px var(--taupe))'}}/></svg>
            <div style={{position:'absolute',inset:0,display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center'}}><Icon k="comms" size={28} style={{color:'var(--taupe)'}}/><div className="hf-mono" style={{fontSize:11,color:'var(--text-mute)',marginTop:4}}>3s</div></div>
          </div>
          <div className="hf-card-2" style={{padding:'12px 14px',display:'flex',alignItems:'center',gap:11,textAlign:'left',marginTop:8}}><div style={{width:34,height:34,borderRadius:9,background:'var(--panel-3)',border:'1px solid var(--line)',display:'flex',alignItems:'center',justifyContent:'center',color:'var(--taupe)',flex:'none'}}><Icon k="comms" size={17}/></div><div><div style={{fontSize:13.5,fontWeight:600,color:'var(--paper)'}}>Request Backup</div><div style={{fontSize:11,color:'var(--text-mute)'}}>Sends pre-formatted alert to Team Bravo</div></div></div>
          <Col gap={10} style={{marginTop:18}}><Btn variant="accent" lg block>Confirm</Btn><Btn variant="ghost" block style={{border:'none'}}>Cancel</Btn></Col>
          <div className="hf-label" style={{marginTop:12,fontSize:9}}>Auto-cancels in 3s · haptic confirmation</div>
        </div>
      </div>
    </PhoneShell>
  );
}

/* ---------------- ALERTS ---------------- */
function MAlerts(){
  return (
    <PhoneShell>
      <AppBar title="Alerts" right={<Chip>7 active</Chip>}/>
      <MBody pad="0 14px" tab="Alerts">
        <div style={{padding:'6px 2px'}}><span className="hf-label" style={{color:'var(--crit)',fontSize:9.5}}>Critical · 3</span></div>
        <Col gap={9}>
          {[['crit','AC-9008','IMU self-test failed','2m'],['crit','AC-7741','Calibration expired','14m'],['crit','AC-5512','Offline > 72h','3h']].map((a,i)=>(
            <div key={i} className="hf-card" style={{padding:'12px 13px',borderLeft:'3px solid var(--crit)',display:'flex',gap:11,alignItems:'center'}}><Dot s="crit"/><div style={{flex:1,minWidth:0}}><div style={{fontSize:12.5,fontWeight:600,color:'var(--paper)'}}>{a[2]}</div><span className="hf-label" style={{fontSize:9}}>{a[1]} · {a[3]}</span></div><span className="hf-label" style={{fontSize:13}}>›</span></div>
          ))}
        </Col>
        <div style={{padding:'10px 2px 6px'}}><span className="hf-label" style={{color:'var(--warn)',fontSize:9.5}}>Warning · 4</span></div>
        <Col gap={9}>
          {[['warn','AC-3320','Thermal marginal','38m'],['warn','AC-7740','Firmware available','1h']].map((a,i)=>(
            <div key={i} className="hf-card" style={{padding:'12px 13px',borderLeft:'3px solid var(--warn)',display:'flex',gap:11,alignItems:'center'}}><Dot s="warn"/><div style={{flex:1,minWidth:0}}><div style={{fontSize:12.5,fontWeight:600,color:'var(--paper)'}}>{a[2]}</div><span className="hf-label" style={{fontSize:9}}>{a[1]} · {a[3]}</span></div><span className="hf-label" style={{fontSize:13}}>›</span></div>
          ))}
        </Col>
      </MBody>
    </PhoneShell>
  );
}

/* ---------------- ACCOUNT & SETTINGS ---------------- */
function MAccount(){
  return (
    <PhoneShell>
      <AppBar title="Account &amp; Settings"/>
      <MBody pad="4px 16px">
        <div className="hf-card" style={{padding:14,display:'flex',alignItems:'center',gap:12}}><div className="hf-avatar" style={{width:46,height:46,fontSize:15}}>MO</div><div><div style={{fontSize:15,fontWeight:700,color:'var(--paper)'}}>M. Operator</div><Chip style={{marginTop:4}}>Field Operator</Chip><div className="hf-label" style={{fontSize:8.5,marginTop:4}}>JSOC TF Alpha · Signals · Bravo</div></div></div>
        <Lbl style={{marginTop:16}}>Field Modes</Lbl>
        <Col gap={9} style={{marginTop:8}}>
          <div className="hf-card" style={{padding:'12px 13px',display:'flex',justifyContent:'space-between',alignItems:'center'}}><span style={{fontSize:13,color:'var(--text)'}}>High-Contrast Mode</span><Toggle on/></div>
          <div className="hf-card" style={{padding:'12px 13px',display:'flex',justifyContent:'space-between',alignItems:'center'}}><span style={{fontSize:13,color:'var(--text)'}}>Glove Mode</span><Toggle on={false}/></div>
        </Col>
        <Lbl style={{marginTop:16}}>Motion Gestures</Lbl>
        <div className="hf-card" style={{padding:'13px',marginTop:8,display:'flex',justifyContent:'space-between',alignItems:'center'}}><div><div style={{fontSize:13,color:'var(--text)'}}>Recognition settings</div><span className="hf-label" style={{fontSize:8.5}}>sensitivity · timeout · audit log</span></div><span className="hf-label" style={{fontSize:13}}>›</span></div>
        <Lbl style={{marginTop:16}}>Session</Lbl>
        <div className="hf-card" style={{padding:'12px 13px',marginTop:8,display:'flex',justifyContent:'space-between',alignItems:'center'}}><span style={{fontSize:13,color:'var(--text)'}}>Biometric resume</span><Toggle on/></div>
        <Btn variant="danger" block style={{marginTop:12}}>Sign Out</Btn>
      </MBody>
    </PhoneShell>
  );
}

window.MOBILE_SCREENS = {login:MLogin, home:MHome, devices:MDevices, detail:MDetail, detailhealth:MHealth, detailactions:MActions, library:Library, confirm:Confirm, alerts:MAlerts, account:MAccount};
Object.assign(window, { PhoneShell, MTabBar, AppBar, StatusBand, MBody, GestureCard });
function HFMobile({screen='library'}){ const C=(window.MOBILE_SCREENS||{})[screen]||Library; return <C/>; }
window.HFMobile = HFMobile;
