Screen,Callout,Region,Rule
desktop-en-light,1,Sticky header,Desktop nav appears only at >=1120px; orange reserved for demo.
desktop-en-light,2,Hero copy,Single h1; primary demo before tour in reading order.
desktop-en-light,3,Product preview,Illustrative status must remain visible internally and approved before launch.
tablet-fr-light,1,Medium navigation,Drawer mode remains below 1120px; avoid squeezed desktop controls.
tablet-fr-light,2,French expansion,Text blocks grow vertically; no fixed card heights or truncation.
mobile-ar-dark,1,Document RTL,Root dir=rtl; content aligns start and order follows Arabic reading.
mobile-ar-dark,2,Compact CTAs,Buttons remain 44px minimum and may stack/content-wrap.
mobile-drawer-ar-dark,1,Inline-start drawer,Drawer opens from right in RTL.
mobile-drawer-ar-dark,2,Focus boundary,Background inert; focus starts at close and loops inside.
demo-dialog-en-light,1,Dialog heading,Programmatic name comes from visible heading.
demo-dialog-en-light,2,Form labels,"Visible labels stay present; required state is announced, not only asterisk."
demo-dialog-en-light,3,Submission area,Persistent errors and submit remain reachable with virtual keyboard.
tour-dialog-fr-dark,1,Progress,Localized step count announced politely.
tour-dialog-fr-dark,2,Step focus,Step heading/article receives focus after navigation.
tour-dialog-fr-dark,3,Actions,Back/Next meaning stays explicit; layout follows direction.