/* Repairs the legacy stylesheets where they reach into the React islands. Chakra v3 declares `@layer reset, base, tokens, recipes` and puts every component recipe inside those layers. An unlayered author rule beats any layer whatever its specificity, and the legacy sheets are all unlayered, so a bare element selector wins against Chakra's own component styles: moved.css form, table, td, tr, button, ... { padding: 0 } moved.css button, input, optgroup, ... { font-size: 100% } On /campaign that turned "New Campaign" into 24px text - inherited from the heading row, since 100% means the parent's size - in a box with no padding, so the label ran past its own border. Every Chakra control in the app was affected; it only became obvious where the surrounding text was large. revert-layer drops these declarations back to the value the layers set, which is Chakra's, without naming a single measurement here. Restating the sizes by hand would go stale the moment a recipe changes. Deliberately not scoped to [data-controller]: Chakra portals its dialogs and menus to , outside the island, and those need the same repair. The chakra- class prefix is what marks an element as belonging to an island. */ [class*="chakra-"] { margin: revert-layer; padding: revert-layer; font-family: revert-layer; font-size: revert-layer; font-weight: revert-layer; line-height: revert-layer; text-transform: revert-layer; min-height: revert-layer; }