// Shared screen scaffolding for the app kit.
function Glows({ colors = ['#00e5db', '#ff375f', '#ff9f0a'] }) {
  const g = (c, x, y, s) => <div style={{ position: 'absolute', left: x, top: y, width: s, height: s, borderRadius: '50%', background: 'color-mix(in srgb, ' + c + ' 10%, transparent)', filter: 'blur(100px)' }}></div>;
  return <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', overflow: 'hidden' }}>{g(colors[0], 6, -140, 380)}{g(colors[1], 190, 380, 280)}{g(colors[2], -80, 560, 300)}</div>;
}
function TopBar({ left, center, right }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr auto 1fr', alignItems: 'center', minHeight: 48, padding: '4px 0' }}>
      <div style={{ justifySelf: 'start' }}>{left}</div>
      <div>{center}</div>
      <div style={{ justifySelf: 'end' }}>{right}</div>
    </div>
  );
}
function Meta({ children, color = 'var(--text-muted)' }) {
  return <span style={{ fontSize: 12, fontWeight: 800, letterSpacing: '0.05em', textTransform: 'uppercase', color, whiteSpace: 'nowrap' }}>{children}</span>;
}
function Title({ eyebrow, children, sub }) {
  const { Eyebrow } = window.GG;
  return (
    <div style={{ marginTop: 16 }}>
      {eyebrow && <div style={{ marginBottom: 8 }}><Eyebrow>{eyebrow}</Eyebrow></div>}
      <h1 style={{ margin: 0, fontSize: 'var(--type-headline-size)', lineHeight: 'var(--type-headline-lh)', fontWeight: 800, letterSpacing: 'var(--type-headline-track)', textWrap: 'pretty' }}>{children}</h1>
      {sub && <p style={{ margin: '10px 0 0', fontSize: 15, lineHeight: 1.375, fontWeight: 500, color: 'var(--text-muted)', textWrap: 'pretty' }}>{sub}</p>}
    </div>
  );
}
function Hi({ children }) { return <span style={{ color: 'var(--gg-cyan)', textShadow: 'var(--glow-text)' }}>{children}</span>; }
function Section({ label, children, right }) {
  return (
    <div style={{ marginTop: 24, display: 'flex', flexDirection: 'column', gap: 10 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}><Meta>{label}</Meta>{right}</div>
      {children}
    </div>
  );
}
function Screen({ children, footer, tabBar, glow = true, glowColors }) {
  return (
    <>
      {glow && <Glows colors={glowColors} />}
      <div style={{ position: 'relative', flex: 1, minHeight: 0, overflowY: 'auto', padding: '0 20px', scrollbarWidth: 'none', display: 'flex', flexDirection: 'column' }}>
        <div style={{ flex: '1 0 auto', display: 'flex', flexDirection: 'column' }}>{children}</div>
        {footer && <div style={{ position: 'sticky', bottom: 0, flex: 'none', margin: '0 -20px', padding: '24px 20px 4px', background: 'linear-gradient(rgba(7,7,10,0), var(--bg-page) 40%)', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>{footer}</div>}
        {!footer && <div style={{ height: 20, flex: 'none' }}></div>}
      </div>
      {tabBar}
    </>
  );
}
function QuietLink({ children, onClick, color = 'var(--text-muted)' }) {
  return <button type="button" onClick={onClick} style={{ minHeight: 44, padding: '0 12px', border: 0, background: 'transparent', fontFamily: 'var(--font-ui)', fontSize: 14, fontWeight: 700, color, cursor: 'pointer' }}>{children}</button>;
}
function Chevron() { return <span className="material-symbols-outlined" style={{ color: 'var(--text-muted)', fontSize: 22 }}>chevron_right</span>; }
Object.assign(window, { Glows, TopBar, Meta, Title, Hi, Section, Screen, QuietLink, Chevron });