/*
* @uwckit/layouts — preflight.css
*
* Prevents layout FOUC (flash of unstyled content) for uwc-container,
* uwc-stack, uwc-box, and uwc-grid.
*
* Problem: these are Lit custom elements whose critical CSS lives inside
* shadow DOM. Until JavaScript defines them, the browser treats them as
* unknown inline elements (display: inline), so text sprawls full-width
* and the page looks broken.
*
* Solution: :not(:defined) matches any custom element that has NOT yet been
* registered. The moment customElements.define() runs, the pseudo-class
* stops matching — the shadow DOM styles take over automatically. No JS
* toggle, no CLS, no LCP penalty.
*
* Usage — include BEFORE the JS bundle in :
*
*
*
*/
uwc-container:not(:defined) {
display: block;
width: 100%;
max-width: 1280px; /* matches the default xl max-width */
margin-left: auto;
margin-right: auto;
padding-left: 1rem;
padding-right: 1rem;
box-sizing: border-box;
}
uwc-stack:not(:defined) {
display: flex;
flex-direction: column;
width: 100%;
box-sizing: border-box;
}
uwc-box:not(:defined) {
display: block;
width: 100%;
box-sizing: border-box;
}
uwc-grid:not(:defined) {
display: grid;
grid-template-columns: 1fr; /* matches the default single-column fallback */
width: 100%;
box-sizing: border-box;
}