// Static bundle of design-system components for publishing (generated from components/*.jsx).
(function () {
const React = window.React;

function Icon({ name, size = 20, fill = false, weight = 400, color, style }) {
  return <span className="material-symbols-outlined" aria-hidden="true" style={{ fontSize: size, color, fontVariationSettings: `"FILL" ${fill ? 1 : 0}, "wght" ${weight}, "GRAD" 0, "opsz" 24`, ...style }}>{name}</span>;
}

var DOMAINS = { focus: 'var(--gg-domain-focus)', flexibility: 'var(--gg-domain-flexibility)', problem: 'var(--gg-domain-problem)', memory: 'var(--gg-domain-memory)', speed: 'var(--gg-domain-speed)', composure: 'var(--gg-domain-composure)' };
var mix = (c, p, base = 'transparent') => `color-mix(in srgb, ${c} ${p}%, ${base})`;
function RankBadge({ rank, domain = 'focus', color, size = 28 }) {
  const c = color || DOMAINS[domain] || DOMAINS.focus;
  const on = rank != null;
  return <span style={{ width: size, height: size, flex: 'none', borderRadius: '50%', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: size * 0.5, fontWeight: on ? 900 : 700,
    background: on ? c : 'var(--gg-fill-glass)', color: on ? '#070709' : 'var(--text-disabled)', border: on ? 'none' : '1px solid var(--gg-line-strong)', boxShadow: on ? `0 0 ${size * 0.43}px ${mix(c, 60)}` : 'none', transition: 'all var(--dur)' }}>{on ? rank : '+'}</span>;
}

function StepBadge({ current, total, variant = 'pill' }) {
  if (variant === 'plain') return <span style={{ fontSize: 12, fontWeight: 500, letterSpacing: '0.05em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)' }}>Step {current} of {total}</span>;
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '4px 12px', borderRadius: 'var(--radius-pill)', background: 'var(--gg-fill-glass)', border: '1px solid var(--gg-line)', backdropFilter: 'blur(12px)' }}>
      <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--gg-cyan)', animation: 'gg-pulse 2s cubic-bezier(.4,0,.6,1) infinite' }}></span>
      <span style={{ fontSize: 12, fontWeight: 800, letterSpacing: '0.05em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>Step {current}/{total}</span>
    </div>
  );
}

var DOMAINS = { focus: 'var(--gg-domain-focus)', flexibility: 'var(--gg-domain-flexibility)', problem: 'var(--gg-domain-problem)', memory: 'var(--gg-domain-memory)', speed: 'var(--gg-domain-speed)', composure: 'var(--gg-domain-composure)' };
var mix = (c, p, base = 'transparent') => `color-mix(in srgb, ${c} ${p}%, ${base})`;
function Eyebrow({ children, domain = 'focus', color }) {
  const c = color || DOMAINS[domain] || DOMAINS.focus;
  return <span style={{ display: 'inline-block', padding: '2px 10px', borderRadius: 'var(--radius-pill)', fontSize: 12, fontWeight: 900, letterSpacing: '0.1em', textTransform: 'uppercase', color: c, background: mix(c, 15), border: `1px solid ${mix(c, 30)}` }}>{children}</span>;
}


function Button({ children, tone = 'cyan', icon = 'arrow_forward', block = true, disabled = false, onClick, type = 'button' }) {
  const [hover, setHover] = React.useState(false);
  const [down, setDown] = React.useState(false);
  const cyan = tone === 'cyan';
  const ghost = tone === 'ghost';
  return (
    <button type={type} disabled={disabled} onClick={onClick}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => { setHover(false); setDown(false); }}
      onMouseDown={() => setDown(true)} onMouseUp={() => setDown(false)}
      style={{ width: block ? '100%' : 'auto', height: 56, padding: '0 24px', borderRadius: 'var(--radius-pill)',
        background: ghost ? (hover ? 'rgba(255,255,255,0.14)' : 'var(--gg-fill-glass)') : cyan ? 'var(--grad-cta)' : 'var(--grad-cta-teal)', color: cyan ? 'var(--text-on-accent)' : '#fff', border: ghost ? '1px solid var(--gg-line-strong)' : 0,
        fontFamily: 'var(--font-ui)', fontSize: 'var(--type-button-size)', fontWeight: 'var(--type-button-weight)', letterSpacing: 'var(--type-button-track)',
        display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10, cursor: disabled ? 'not-allowed' : 'pointer', opacity: disabled ? 0.4 : 1,
        boxShadow: ghost ? 'none' : cyan ? (hover ? 'var(--glow-cta-hover)' : 'var(--glow-cta)') : '0 10px 15px -3px rgba(0,132,126,0.3)',
        filter: tone === 'teal' && hover ? 'brightness(1.1)' : 'none',
        transform: down && !disabled ? 'scale(var(--press-scale-cta))' : 'none', transition: 'all var(--dur-fast) var(--ease)' }}>
      <span>{children}</span>
      {icon && <Icon name={icon} size={22} weight={700} />}
    </button>
  );
}


function BackButton({ label = 'Back', onClick }) {
  const [hover, setHover] = React.useState(false);
  return (
    <button type="button" aria-label="Go back" onClick={onClick} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '6px 10px', marginLeft: -8, border: 0, borderRadius: 'var(--radius-tile)',
        background: hover ? 'var(--gg-fill-hover)' : 'transparent', color: 'var(--gg-cyan)', fontFamily: 'var(--font-ui)', fontSize: 15, fontWeight: 700, cursor: 'pointer' }}>
      <Icon name="arrow_back_ios_new" size={20} weight={700} />
      <span>{label}</span>
    </button>
  );
}

function TextLink({ children, href = '#', onClick }) {
  const [hover, setHover] = React.useState(false);
  return (
    <a href={href} onClick={onClick} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ color: hover ? 'var(--gg-teal)' : '#fff', fontWeight: 600, textDecoration: 'underline', textDecorationColor: 'color-mix(in srgb, var(--gg-teal-deep) 70%, transparent)', textUnderlineOffset: 4, transition: 'color var(--dur-fast)' }}>
      {children}
    </a>
  );
}



var DOMAINS = { focus: 'var(--gg-domain-focus)', flexibility: 'var(--gg-domain-flexibility)', problem: 'var(--gg-domain-problem)', memory: 'var(--gg-domain-memory)', speed: 'var(--gg-domain-speed)', composure: 'var(--gg-domain-composure)' };
var mix = (c, p, base = 'transparent') => `color-mix(in srgb, ${c} ${p}%, ${base})`;
function FocusCard({ icon, title, kicker, description, domain = 'focus', color, rank = null, selected = false, onClick }) {
  const c = color || DOMAINS[domain] || DOMAINS.focus;
  const [hover, setHover] = React.useState(false);
  const [down, setDown] = React.useState(false);
  return (
    <div role="button" tabIndex={0} aria-pressed={selected} onClick={onClick}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => { setHover(false); setDown(false); }} onMouseDown={() => setDown(true)} onMouseUp={() => setDown(false)}
      style={{ position: 'relative', minHeight: 148, padding: 16, borderRadius: 'var(--radius-card)', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', cursor: 'pointer', boxSizing: 'border-box',
        background: selected ? `linear-gradient(180deg, ${mix(c, 22, '#0c0e14')} 0%, ${mix(c, 10, '#0c0e14')} 50%, #0c0e14 100%)` : hover ? 'var(--surface-card-hover)' : 'var(--surface-card)',
        border: selected ? `2px solid ${c}` : '1px solid var(--gg-line)', margin: selected ? 0 : 1,
        boxShadow: selected ? `0 0 22px ${mix(c, 35)}` : 'none', transform: down ? 'scale(var(--press-scale))' : 'none', transition: 'all var(--dur) var(--ease)' }}>
      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}>
        <div style={{ width: 44, height: 44, borderRadius: 'var(--radius-tile)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: c,
          background: mix(c, selected ? 20 : 15), border: `1px solid ${mix(c, selected ? 40 : 30)}`, boxShadow: selected ? `0 0 12px ${mix(c, 40)}` : 'none' }}>
          <Icon name={icon} size={26} />
        </div>
        <RankBadge rank={selected ? rank : null} color={c} />
      </div>
      <div style={{ marginTop: 14 }}>
        <div style={{ fontSize: 16, fontWeight: 800, letterSpacing: '-0.01em', lineHeight: 1.25, color: '#fff' }}>{title}</div>
        {kicker && <div style={{ marginTop: 2, fontSize: 11, fontWeight: 700, letterSpacing: '0.05em', textTransform: 'uppercase', color: c }}>{kicker}</div>}
        {description && <div style={{ marginTop: 4, fontSize: 12, lineHeight: 1.375, color: selected ? 'var(--text-secondary)' : 'var(--text-subtle)' }}>{description}</div>}
      </div>
    </div>
  );
}



var DOMAINS = { focus: 'var(--gg-domain-focus)', flexibility: 'var(--gg-domain-flexibility)', problem: 'var(--gg-domain-problem)', memory: 'var(--gg-domain-memory)', speed: 'var(--gg-domain-speed)', composure: 'var(--gg-domain-composure)' };
var mix = (c, p, base = 'transparent') => `color-mix(in srgb, ${c} ${p}%, ${base})`;
function PriorityRow({ rank, title, label, domain = 'focus', color, onRemove, draggable = true }) {
  const c = color || DOMAINS[domain] || DOMAINS.focus;
  const [hover, setHover] = React.useState(false);
  const btn = { padding: 6, border: 0, background: 'transparent', borderRadius: 8, cursor: 'pointer', display: 'flex' };
  return (
    <div onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '12px 14px', borderRadius: 'var(--radius-card)', background: 'var(--surface-row)',
        border: `1px solid ${hover ? mix(c, 40) : 'var(--gg-line-faint)'}`, transition: 'border-color var(--dur)' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, minWidth: 0 }}>
        <RankBadge rank={rank} color={c} size={24} />
        <div style={{ display: 'flex', flexDirection: 'column', minWidth: 0 }}>
          <span style={{ fontSize: 15, fontWeight: 700, color: '#fff', lineHeight: 1.25, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{title}</span>
          {label && <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.025em', textTransform: 'uppercase', color: c }}>{label}</span>}
        </div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
        {draggable && <button type="button" aria-label="Reorder priority" style={{ ...btn, color: 'rgba(255,255,255,0.7)', cursor: 'grab' }}><Icon name="drag_indicator" size={20} /></button>}
        {onRemove && <button type="button" aria-label="Remove" onClick={onRemove} style={{ ...btn, color: 'rgba(255,255,255,0.4)' }}><Icon name="close" size={18} /></button>}
      </div>
    </div>
  );
}


function Panel({ status, title, complete = false, children }) {
  return (
    <div style={{ borderRadius: 'var(--radius-panel)', background: 'var(--surface-panel)', border: '1px solid var(--gg-line)', padding: 18, boxShadow: 'var(--shadow-panel)', backdropFilter: 'blur(24px)' }}>
      {(status || title) && (
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingBottom: 14, borderBottom: '1px solid var(--gg-line)' }}>
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            {status && <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ position: 'relative', width: 8, height: 8 }}>
                <span style={{ position: 'absolute', inset: 0, borderRadius: '50%', background: 'var(--gg-cyan)', animation: 'gg-ping 1s cubic-bezier(0,0,.2,1) infinite' }}></span>
                <span style={{ position: 'absolute', inset: 0, borderRadius: '50%', background: 'var(--gg-cyan)' }}></span>
              </span>
              <span style={{ fontSize: 12, fontWeight: 900, letterSpacing: '0.05em', textTransform: 'uppercase', color: 'var(--gg-cyan)' }}>{status}</span>
            </div>}
            {title && <span style={{ marginTop: 2, fontSize: 17, fontWeight: 800, letterSpacing: '-0.01em', color: '#fff' }}>{title}</span>}
          </div>
          {complete && <span style={{ width: 32, height: 32, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'color-mix(in srgb, var(--gg-cyan) 15%, transparent)', color: 'var(--gg-cyan)' }}><Icon name="check" size={18} weight={700} /></span>}
        </div>
      )}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: (status || title) ? 12 : 0 }}>{children}</div>
    </div>
  );
}

function Bars() { return <svg width="16" height="12" viewBox="0 0 16 12" fill="currentColor"><rect height="3.5" rx="0.5" width="2.5" x="0.5" y="8.5"/><rect height="6" rx="0.5" width="2.5" x="4.5" y="6"/><rect height="8.5" rx="0.5" width="2.5" x="8.5" y="3.5"/><rect height="11" rx="0.5" width="2.5" x="12.5" y="1"/></svg>; }
function Wifi() { return <svg width="16" height="12" viewBox="0 0 16 12" fill="currentColor"><path d="M8 2.2C4.9 2.2 2.1 3.4.1 5.4l1.4 1.4C3.1 5.2 5.4 4.2 8 4.2s4.9 1 6.5 2.6l1.4-1.4C13.9 3.4 11.1 2.2 8 2.2zm0 3.8C6 6 4.2 6.8 2.9 8.1l1.4 1.4c1-1 2.3-1.5 3.7-1.5s2.7.5 3.7 1.5l1.4-1.4C11.8 6.8 10 6 8 6zm0 3.8c-.9 0-1.7.4-2.3 1L8 13.1l2.3-2.3c-.6-.6-1.4-1-2.3-1z"/></svg>; }
function StatusBar({ time = '9:41' }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '12px 28px 0', fontSize: 14, fontWeight: 600, color: 'rgba(255,255,255,0.95)', position: 'relative', zIndex: 20 }}>
      <span>{time}</span>
      <img src={((window.__resources && window.__resources['logo']) || '../../assets/logo-genius-gyms-on-dark.png')} alt="Genius Gyms" style={{ position: 'absolute', left: '50%', top: 6, transform: 'translateX(-50%)', height: 26, display: 'block', mixBlendMode: 'lighten', pointerEvents: 'none' }} />
      <div style={{ display: 'flex', alignItems: 'center', gap: 6, opacity: 0.9 }}>
        <Bars /><Wifi />
        <div style={{ width: 24, height: 12, border: '1px solid rgba(255,255,255,0.8)', borderRadius: 4, padding: 1.5, boxSizing: 'border-box', position: 'relative' }}><div style={{ width: '75%', height: '100%', background: '#fff', borderRadius: 1.5 }}></div></div>
      </div>
    </div>
  );
}
function HomeIndicator() { return <div style={{ width: 128, height: 4, borderRadius: 9999, background: 'rgba(255,255,255,0.3)', margin: '12px auto 8px' }}></div>; }
function PhoneShell({ children, background = 'var(--bg-page)', statusBar = true, homeIndicator = true }) {
  return (
    <div style={{ position: 'relative', width: 'var(--device-w)', height: 'var(--device-h)', borderRadius: 'var(--radius-device)', overflow: 'hidden', background, border: '1px solid rgba(23,23,23,0.6)', boxShadow: '0 25px 50px -12px rgba(0,0,0,0.25)', display: 'flex', flexDirection: 'column', fontFamily: 'var(--font-ui)', color: '#fff' }}>
      {statusBar && <StatusBar />}
      <div style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', position: 'relative' }}>{children}</div>
      {homeIndicator && <HomeIndicator />}
    </div>
  );
}

var mix = (c, p, base = 'transparent') => `color-mix(in srgb, ${c} ${p}%, ${base})`;
function ListRow({ icon, color = 'var(--gg-cyan)', title, subtitle, trailing, onClick, children }) {
  const [hover, setHover] = React.useState(false);
  const Tag = onClick ? 'button' : 'div';
  return (
    <div>
      <Tag type={onClick ? 'button' : undefined} onClick={onClick} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
        style={{ width: '100%', minHeight: 64, padding: '12px 16px', display: 'flex', alignItems: 'center', gap: 14, border: 0, textAlign: 'left', fontFamily: 'var(--font-ui)', color: '#fff', cursor: onClick ? 'pointer' : 'default', boxSizing: 'border-box',
          background: onClick && hover ? 'var(--gg-fill-hover)' : 'transparent', transition: 'background var(--dur)' }}>
        {icon && <span style={{ width: 40, height: 40, flex: 'none', borderRadius: 'var(--radius-tile)', display: 'flex', alignItems: 'center', justifyContent: 'center', color, background: mix(color, 15), border: `1px solid ${mix(color, 30)}` }}><span className="material-symbols-outlined" style={{ fontSize: 22 }}>{icon}</span></span>}
        <span style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', gap: 2 }}>
          <span style={{ fontSize: 15, fontWeight: 700, lineHeight: 1.25 }}>{title}</span>
          {subtitle && <span style={{ fontSize: 12, color: 'var(--text-muted)', lineHeight: 1.35, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{subtitle}</span>}
        </span>
        {trailing}
      </Tag>
      {children}
    </div>
  );
}
function ListGroup({ label, children }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      {label && <span style={{ fontSize: 11, fontWeight: 800, letterSpacing: '0.05em', textTransform: 'uppercase', color: 'var(--text-muted)', padding: '0 4px' }}>{label}</span>}
      <div style={{ borderRadius: 'var(--radius-panel)', background: 'var(--surface-panel)', border: '1px solid var(--gg-line)', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
        {React.Children.toArray(children).map((c, i) => <div key={i} style={{ borderTop: i ? '1px solid var(--gg-line)' : 'none' }}>{c}</div>)}
      </div>
    </div>
  );
}

function Sheet({ open = false, onClose, title, children }) {
  if (!open) return null;
  return (
    <div style={{ position: 'absolute', inset: 0, zIndex: 50, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end' }}>
      <div onClick={onClose} style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(6px)' }}></div>
      <div style={{ position: 'relative', borderRadius: '36px 36px 0 0', background: 'var(--surface-panel)', borderTop: '1px solid var(--gg-line-strong)', padding: '10px 24px 28px', boxShadow: '0 -12px 40px rgba(0,0,0,0.6)', maxHeight: '88%', overflowY: 'auto', fontFamily: 'var(--font-ui)', color: '#fff' }}>
        <div style={{ width: 40, height: 5, borderRadius: 9999, background: 'rgba(255,255,255,0.2)', margin: '0 auto 16px' }}></div>
        {title && <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, marginBottom: 16 }}>
          <span style={{ fontSize: 22, fontWeight: 800, letterSpacing: '-0.02em', lineHeight: 1.15 }}>{title}</span>
          <button type="button" aria-label="Close" onClick={onClose} style={{ width: 36, height: 36, flex: 'none', borderRadius: '50%', border: 0, background: 'var(--gg-fill-glass)', color: '#fff', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><span className="material-symbols-outlined" style={{ fontSize: 20 }}>close</span></button>
        </div>}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>{children}</div>
      </div>
    </div>
  );
}

function Segmented({ options = [], value, onChange }) {
  return (
    <div role="tablist" style={{ display: 'grid', gridTemplateColumns: `repeat(${options.length}, minmax(0,1fr))`, gap: 4, padding: 4, borderRadius: 'var(--radius-card)', background: 'var(--surface-card)', border: '1px solid var(--gg-line)' }}>
      {options.map(o => { const on = o.value === value; return (
        <button key={o.value} type="button" role="tab" aria-selected={on} onClick={() => onChange && onChange(o.value)}
          style={{ minHeight: 40, padding: '0 8px', borderRadius: 12, border: 0, cursor: 'pointer', fontFamily: 'var(--font-ui)', fontSize: 12, fontWeight: 800, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
            background: on ? 'rgba(255,255,255,0.12)' : 'transparent', color: on ? (o.color || '#fff') : 'var(--text-muted)', boxShadow: on ? 'inset 0 0 0 1px rgba(255,255,255,0.12)' : 'none', transition: 'all var(--dur)' }}>{o.label}</button>); })}
    </div>
  );
}

var mix = (c, p, base = 'transparent') => `color-mix(in srgb, ${c} ${p}%, ${base})`;
function OptionChip({ children, selected = false, icon, color = 'var(--gg-cyan)', size = 'md', onClick }) {
  const [hover, setHover] = React.useState(false);
  const h = size === 'sm' ? 40 : 52;
  return (
    <button type="button" aria-pressed={selected} onClick={onClick} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ minHeight: h, padding: size === 'sm' ? '0 14px' : '0 12px', borderRadius: size === 'sm' ? 'var(--radius-pill)' : 'var(--radius-tile)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6, flexShrink: 0,
        fontFamily: 'var(--font-ui)', fontSize: size === 'sm' ? 13 : 14, fontWeight: 700, whiteSpace: 'nowrap', cursor: 'pointer', transition: 'all var(--dur) var(--ease)',
        background: selected ? mix(color, 14) : hover ? 'var(--surface-card-hover)' : 'var(--surface-card)',
        border: selected ? `2px solid ${color}` : '1px solid var(--gg-line)', padding: selected ? undefined : undefined,
        color: selected ? color : '#fff', boxShadow: selected ? `0 0 16px ${mix(color, 25)}` : 'none' }}>
      {icon && <span className="material-symbols-outlined" style={{ fontSize: 18 }}>{icon}</span>}
      <span>{children}</span>
    </button>
  );
}

function TextField({ label, value, onChange, placeholder, type = 'text', autoComplete, id }) {
  const [focus, setFocus] = React.useState(false);
  return (
    <label htmlFor={id} style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      {label && <span style={{ fontSize: 11, fontWeight: 800, letterSpacing: '0.05em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>{label}</span>}
      <input id={id} type={type} value={value} placeholder={placeholder} autoComplete={autoComplete} onChange={e => onChange && onChange(e.target.value)} onFocus={() => setFocus(true)} onBlur={() => setFocus(false)}
        style={{ height: 56, padding: '0 16px', borderRadius: 'var(--radius-card)', fontFamily: 'var(--font-ui)', fontSize: 16, fontWeight: 600, color: '#fff', outline: 'none', boxSizing: 'border-box', width: '100%',
          background: 'var(--surface-card)', border: focus ? '2px solid var(--gg-cyan)' : '1px solid var(--gg-line-strong)', margin: focus ? 0 : 1, boxShadow: focus ? '0 0 16px color-mix(in srgb, var(--gg-cyan) 25%, transparent)' : 'none', transition: 'box-shadow var(--dur)' }} />
    </label>
  );
}

function CodeInput({ value = '', length = 6, onChange }) {
  const refs = React.useRef([]);
  const digits = Array.from({ length }, (_, i) => value[i] || '');
  const set = (i, v) => { const d = v.replace(/\D/g, '').slice(-1); const next = digits.slice(); next[i] = d; onChange && onChange(next.join('')); if (d && i < length - 1) refs.current[i + 1] && refs.current[i + 1].focus(); };
  return (
    <div style={{ display: 'grid', gridTemplateColumns: `repeat(${length}, minmax(0,1fr))`, gap: 8 }}>
      {digits.map((d, i) => (
        <input key={i} ref={el => (refs.current[i] = el)} inputMode="numeric" maxLength={1} value={d} onChange={e => set(i, e.target.value)}
          onKeyDown={e => { if (e.key === 'Backspace' && !d && i > 0) refs.current[i - 1].focus(); }}
          style={{ height: 60, width: '100%', boxSizing: 'border-box', borderRadius: 'var(--radius-tile)', textAlign: 'center', fontFamily: 'var(--font-ui)', fontSize: 24, fontWeight: 800, outline: 'none', fontVariantNumeric: 'tabular-nums',
            color: d ? 'var(--gg-cyan)' : '#fff', background: d ? 'color-mix(in srgb, var(--gg-cyan) 10%, var(--surface-card))' : 'var(--surface-card)',
            border: d ? '2px solid var(--gg-cyan)' : '1px solid var(--gg-line-strong)', boxShadow: d ? '0 0 12px color-mix(in srgb, var(--gg-cyan) 30%, transparent)' : 'none' }} />
      ))}
    </div>
  );
}

function Toggle({ checked = false, onChange, label }) {
  return (
    <button type="button" role="switch" aria-checked={checked} aria-label={label} onClick={() => onChange && onChange(!checked)}
      style={{ width: 52, height: 32, borderRadius: 9999, border: 0, padding: 3, cursor: 'pointer', flex: 'none', background: checked ? 'var(--gg-cyan)' : 'rgba(255,255,255,0.16)', boxShadow: checked ? '0 0 14px color-mix(in srgb, var(--gg-cyan) 45%, transparent)' : 'none', transition: 'all var(--dur) var(--ease)' }}>
      <span style={{ display: 'block', width: 26, height: 26, borderRadius: '50%', background: checked ? '#050608' : '#fff', transform: checked ? 'translateX(20px)' : 'none', transition: 'transform var(--dur) var(--ease)' }}></span>
    </button>
  );
}

function TabBar({ items = [], active, onSelect }) {
  return (
    <nav style={{ display: 'flex', justifyContent: 'space-around', padding: '8px 48px 0', borderTop: '1px solid var(--gg-line)', background: 'rgba(7,7,10,0.85)', backdropFilter: 'blur(20px)', flex: 'none' }}>
      {items.map(it => { const on = it.id === active; return (
        <button key={it.id} type="button" onClick={() => onSelect && onSelect(it.id)} style={{ minWidth: 72, minHeight: 52, border: 0, background: 'transparent', cursor: 'pointer', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2, fontFamily: 'var(--font-ui)', fontSize: 11, fontWeight: on ? 800 : 600, color: on ? 'var(--gg-cyan)' : 'var(--text-disabled)' }}>
          <span className="material-symbols-outlined" style={{ fontSize: 26, fontVariationSettings: `"FILL" ${on ? 1 : 0}` }}>{it.icon}</span>
          <span>{it.label}</span>
        </button>); })}
    </nav>
  );
}

var mix = (c, p, base = 'transparent') => `color-mix(in srgb, ${c} ${p}%, ${base})`;
function TapPad({ label, sublabel, tone = 'neutral', color = 'var(--gg-cyan)', lit = false, height = 176, onPress }) {
  const [down, setDown] = React.useState(false);
  const target = tone === 'target';
  const on = lit || down;
  return (
    <button type="button" onPointerDown={() => setDown(true)} onPointerUp={() => setDown(false)} onPointerLeave={() => setDown(false)} onClick={onPress}
      style={{ height, width: '100%', borderRadius: 28, cursor: 'pointer', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 6, fontFamily: 'var(--font-ui)', userSelect: 'none', touchAction: 'manipulation',
        background: target ? (on ? color : `linear-gradient(180deg, ${mix(color, 28, '#0c0e14')}, ${mix(color, 12, '#0c0e14')})`) : (on ? '#2a2c3a' : 'var(--surface-card)'),
        border: target ? `2px solid ${color}` : `2px solid ${on ? 'rgba(255,255,255,0.5)' : 'var(--gg-line-strong)'}`,
        color: target && on ? '#050608' : '#fff', boxShadow: target ? `0 0 ${on ? 40 : 22}px ${mix(color, on ? 60 : 30)}` : 'none',
        transform: on ? 'scale(0.97)' : 'none', transition: 'all 150ms var(--ease)' }}>
      <span style={{ fontSize: 24, fontWeight: 800, letterSpacing: '-0.01em' }}>{label}</span>
      {sublabel && <span style={{ fontSize: 11, fontWeight: 800, letterSpacing: '0.08em', textTransform: 'uppercase', color: target ? (on ? 'rgba(5,6,8,0.7)' : color) : 'var(--text-muted)' }}>{sublabel}</span>}
    </button>
  );
}

var mix = (c, p, base = 'transparent') => `color-mix(in srgb, ${c} ${p}%, ${base})`;
function StimulusCard({ value, caption, feedback, feedbackType = 'neutral', color = 'var(--gg-cyan)', onReplay, size = 120 }) {
  const fb = feedbackType === 'correct' ? 'var(--gg-domain-composure)' : feedbackType === 'wrong' ? 'var(--gg-domain-speed)' : color;
  return (
    <div style={{ position: 'relative', borderRadius: 'var(--radius-panel)', background: 'var(--surface-panel)', border: '1px solid var(--gg-line)', padding: '24px 20px 20px', textAlign: 'center', boxShadow: 'var(--shadow-panel)', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', left: '50%', top: '45%', width: 220, height: 220, transform: 'translate(-50%,-50%)', borderRadius: '50%', background: mix(fb, 18), filter: 'blur(50px)', transition: 'background 200ms' }}></div>
      {onReplay && <button type="button" aria-label="Replay audio" onClick={onReplay} style={{ position: 'absolute', top: 14, right: 14, width: 44, height: 44, borderRadius: '50%', border: '1px solid var(--gg-line)', background: 'var(--gg-fill-glass)', color, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><span className="material-symbols-outlined" style={{ fontSize: 22 }}>volume_up</span></button>}
      <div style={{ position: 'relative', fontSize: size, fontWeight: 800, lineHeight: 1, letterSpacing: '-0.04em', fontVariantNumeric: 'tabular-nums', color: '#fff', textShadow: `0 0 40px ${mix(fb, 50)}` }}>{value}</div>
      <div style={{ position: 'relative', height: 30, marginTop: 14, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        {feedback ? <span style={{ padding: '5px 14px', borderRadius: 9999, fontSize: 12, fontWeight: 800, letterSpacing: '0.05em', textTransform: 'uppercase', color: fb, background: mix(fb, 15), border: `1px solid ${mix(fb, 35)}` }}>{feedback}</span>
          : caption ? <span style={{ fontSize: 13, fontWeight: 700, color }}>{caption}</span> : null}
      </div>
    </div>
  );
}

function ActivityRings({ rings = [], size = 64, stroke, children }) {
  const sw = stroke || Math.max(5, Math.round(size / 9));
  const gap = 2;
  return (
    <div style={{ position: 'relative', width: size, height: size, flex: 'none' }}>
      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={{ transform: 'rotate(-90deg)', overflow: 'visible' }}>
        {rings.map((r, i) => { const rad = size / 2 - sw / 2 - i * (sw + gap); if (rad <= 0) return null; const c = 2 * Math.PI * rad; const p = Math.max(0, Math.min(1, r.value || 0));
          return <g key={i}>
            <circle cx={size / 2} cy={size / 2} r={rad} fill="none" stroke={r.color} strokeOpacity="0.18" strokeWidth={sw} />
            <circle cx={size / 2} cy={size / 2} r={rad} fill="none" stroke={r.color} strokeWidth={sw} strokeLinecap="round" strokeDasharray={c} strokeDashoffset={c * (1 - p)} style={{ transition: 'stroke-dashoffset 600ms var(--ease)', filter: p > 0 ? `drop-shadow(0 0 4px ${r.color})` : 'none' }} />
          </g>; })}
      </svg>
      {children && <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{children}</div>}
    </div>
  );
}

function CadencePill({ rpm, note, sprint = false }) {
  const c = sprint ? 'var(--gg-domain-speed)' : 'var(--gg-cyan)';
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 12px', borderRadius: 9999, background: 'var(--surface-track)', border: `1px solid ${sprint ? 'color-mix(in srgb, var(--gg-domain-speed) 45%, transparent)' : 'var(--gg-line)'}`, whiteSpace: 'nowrap' }}>
      <span style={{ width: 7, height: 7, borderRadius: '50%', background: c, boxShadow: `0 0 8px ${c}`, animation: `gg-pulse ${sprint ? 0.5 : 1.1}s ease-in-out infinite` }}></span>
      <span style={{ fontSize: 13, fontWeight: 800, fontVariantNumeric: 'tabular-nums', color: '#fff' }}>{rpm} rpm</span>
      {note && <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--text-muted)' }}>· {note}</span>}
    </span>
  );
}

function ResponseWindow({ ms, color = 'var(--gg-cyan)', running = true, runKey }) {
  return (
    <div style={{ height: 5, borderRadius: 9999, background: 'var(--surface-track)', overflow: 'hidden' }}>
      {running && <div key={runKey} style={{ height: '100%', background: color, boxShadow: `0 0 8px ${color}`, transformOrigin: 'left', animation: `gg-shrink ${ms}ms linear forwards` }}></div>}
    </div>
  );
}

window.GG = { Icon, RankBadge, StepBadge, Eyebrow, Button, BackButton, TextLink, FocusCard, PriorityRow, Panel, PhoneShell, StatusBar, HomeIndicator, ListRow, ListGroup, Segmented, Sheet, OptionChip, TextField, CodeInput, Toggle, TabBar, TapPad, StimulusCard, ActivityRings, CadencePill, ResponseWindow };
window.GGReady = Promise.resolve(window.GG);
})();