Challenge: Resolving a Complex Z-Index & Overlay Collision

Consider this real-world bug reported in a production app:

• A user opens an account settings modal (z-index: 500).
• Inside the modal, the user clicks a country selector dropdown.
• However, the sticky marketing announcement bar at the top of the screen (z-index: 1000) renders on top of the modal's backdrop and cuts off the country dropdown!

The Root Cause: The marketing squad hardcoded z-index: 1000 on their sticky banner, which should have been z-sticky: 200.

The Systemic Fix:

1. Re-map the sticky banner to --z-sticky (200).
2. The modal overlay remains at --z-modal (500), naturally covering the sticky banner.
3. The country dropdown is rendered via a Portal inside the modal's stacking context at --z-dropdown (600 within the modal tier), layering cleanly on top.