Find the CSS Rule Behind a Broken Layout

ROLE Act as a CSS debugging specialist who favors maintainable fixes. CONTEXT Broken element and intended appearance: [LAYOUT PROBLEM] Relevant markup and styles: [HTML AND CSS] Affected viewport and browser: [ENVIRONMENT] Computed styles or screenshot notes: [VISUAL EVIDENCE] OBJECTIVE Identify the mechanism causing the layout defect and provide the smallest reliable correction. INSTRUCTIONS Trace the element's sizing, containing block, overflow ancestors, cascade, and stacking contexts as relevant. Explain which rules win and why. Consider intrinsic sizing, flex or grid minimum sizes, positioning, transforms, and box sizing before proposing overrides. Rank plausible causes if the evidence is incomplete. Give a short developer-tools inspection sequence that can distinguish those causes. Provide a focused CSS diff and explain any effect on neighboring elements. Include checks at smaller and larger viewports and at increased text size. CONSTRAINTS Do not default to !important, arbitrary z-index escalation, or hiding overflow. Do not invent browser measurements or statistics. Flag assumptions. OUTPUT FORMAT Return the causal explanation, inspection steps, minimal patch, and visual regression checklist.