/* shell.jsx — ScreenShell wrapper used by all step screens */

function ScreenShell({ title, subtitle, children }) {
  return (
    <div className="p-4 sm:px-10 sm:py-8 md:px-16 md:py-10" style={{
      flex: 1, display: 'flex', flexDirection: 'column',
      background: K.bg,
      overflow: 'hidden',
      minHeight: 0,
    }}>
      <div className="mb-4 sm:mb-6 md:mb-7" style={{ flexShrink: 0 }}>
        <h1 className="font-bold leading-none text-3xl sm:text-5xl lg:text-6xl" style={{ color: K.ink, margin: 0, letterSpacing: -1.5 }}>{title}</h1>
        {subtitle && <p className="font-normal leading-snug text-lg sm:text-xl lg:text-2xl" style={{ color: K.meta, margin: '12px 0 0' }}>{subtitle}</p>}
      </div>
      <div style={{ flex: 1, overflow: 'hidden', minHeight: 0, display: 'flex', flexDirection: 'column' }}>
        {children}
      </div>
    </div>
  );
}

window.ScreenShell = ScreenShell;