/** * Page shell layout. * * Provides a stable centred layout from the very first paint, before any * Web Component is defined or rendered. Prevents the visible left-to-centre * layout shift that occurs when centering is applied only inside Shadow DOM. * * Usage in HTML entry points: * *

* *

* * * Width variants: * .app-frame--narrow max-width: 560 px * .app-frame--wide max-width: 1 024 px */ .app-shell { min-height: 100vh; background: var(--color-bg, #f9fafb); font-family: var(--font-family, Inter, "Segoe UI", system-ui, sans-serif); scrollbar-gutter: stable; } .app-frame { max-width: 640px; margin: 0 auto; padding: var(--space-lg, 1.5rem); box-sizing: border-box; } @media (min-width: 768px) { .app-frame { padding: var(--space-xl, 2rem); } } .app-frame--narrow { max-width: 560px; } .app-frame--wide { max-width: 1024px; }